pure CSS multiple stacked position sticky?

Question

Is it possible to have multiple sticky elements stacked on top of each other in pure CSS?

The desired behavior can be seen here: https://webthemez.com/demo/sticky-mu

Answer 1

All you need to do is keep nesting elements with position:sticky into one another. And then set top:2em incrementally to succeeding sticky headers. Your pen contained two columns so I assumed that you needed two scroll-boxes, Hence the long code snippet.

body {
  display: flex;
  flex-direction: row;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #222;
}

.mainParent {
  height: 90%;
  width: 80%;
  background: rgba(222, 222, 222, 0.10);
  color: #ffffd;
  overflow-y: scroll;
  border: 4px solid #ffffd;
}

.mainParent {
  margin: 0.5em
}

.header {
  position: sticky;
  padding: 0.5em;
  background: #ffffd;
  color: #222;
  text-align: center;
}

#header01 {
  top: 0;
}

#header02 {
  top: 2em;
}

#header03 {
  top: 4em;
}

#header04 {
  top: 6em;
}

#header05 {
  top: 8em;
}

.content {
  text-align: center
}

  
Header 01
  

    












    








Content 1-1


    
Header 02
    

      












      








Content 1-2


      
Header 03
      

        












        








Content 1-3


        
Header 04
        

          












          








Content 1-4


          
Header 05
          

              












              








Peace 🖖
          
        
      
    
  


  
Header 01
  

    












    








Content 2-1


    
Header 02
    

      












      








Content 2-2


      
Header 03
      

        












        








Content 2-3


        
Header 04
        

          












          








Content 2-4


          
Header 05
          

              












              








Peace 🖖