How can I create different levels of sticky headers?

前端未结

关注

 2  960

执笔经年 2020-12-02 01:08

I\'d like an elegant way to \"collect\" multi-level headers at the top of the window as the user scrolls, and position:sticky gets me 90% of the way there. The

2条回答

既然无缘 (楼主)

2020-12-02 01:42

I think the logical way to do this is to consider nested divs like below:

h1,
h2,
h3 {
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  margin:0;
}

h1 {
  background-color: red;
  height: 35px;
  z-index:3;
}

h2 {
  background-color: blue;
  height: 25px;
  top:35px;
  z-index:2;
}

h3 {
  background-color: green;
  height: 20px;
  top:60px;
  z-index:1;
}


  Header 1a
  Lorem ipsum dolor sit amet, no qui quis eloquentiam.
  
    Header 2a
    Lorem ipsum dolor sit amet, no qui quis eloquentiam.
    
      Header 3a
      Lorem ipsum dolor sit amet, no qui quis eloquentiam.
      Header 3b
      Lorem ipsum dolor sit amet, no qui quis eloquentiam.
    
  
  
    Header 2b
    Lorem ipsum dolor sit amet, no qui quis eloquentiam.
    
      Header 3c
      Lorem ipsum dolor sit amet, no qui quis eloquentiam.
      Header 3d
      Lorem ipsum dolor sit amet, no qui quis eloquentiam.
    
  


  Header 1b
  Lorem ipsum dolor sit amet, no qui quis eloquentiam.
  
    Header 2c
    Lorem ipsum dolor sit amet, no qui quis eloquentiam.
    
      Header 3e
      Lorem ipsum dolor sit amet, no qui quis eloquentiam.
      Header 3f
      Lorem ipsum dolor sit amet, no qui quis eloquentiam.
    
  
  
    Header 2d
    Lorem ipsum dolor sit amet, no qui quis eloquentiam.
    
      Header 3g
      Lorem ipsum dolor sit amet, no qui quis eloquentiam.
      Header 3h
      Lorem ipsum dolor sit amet, no qui quis eloquentiam.

0 讨论(0)

查看其它2个回答