Position:sticky does not work on website header

Question

I have a website with a left-aligned vertical header, and a right-aligned text body. The header content is too large to display on the website, and I would not like to use something like overflow:scroll, but instead hide irrelevant parts of the header on scrolling. The website title and a "navigation bar" should stay on the page until the bottom of the page is reached. I managed to fix the title using position:sticky. On scrolling, the irrelevant information part disappears, as I want. However, the part I want to keep below (navigation) just scrolls along. In addition, the website title disappears after some scrolling.

I have tried out various approaches, unsuccessfully:

Used min-height and height for the header
Changed the header position from position:static to position:fixed, with strange results (the title wanders down on the page when scrolling)
Removed the .wrapper environment
I also tried the solution from this post (pure CSS multiple stacked position sticky?), but this broke some other parts of the page. Specifically, the page kept on scrolling because of the breaks. On removing them, I got the same problem.

Below is a MWE.

.wrapper {
  width: 1060px;
  margin: 0 auto; }


header {
  width: 270px;
  float: left;
position: static;
top: 0px;
  max-height: 100%;
  }


  .heady {
  position: relative;
  background-color: white;
}

  .headx {
  position: sticky;
  background-color: white;
 z-index:10;
}

#header01 {
  top: 0px;
  padding-bottom: 1em;
}

#header02 {
  top: 48px;
  z-index: 9 !important;
}



section {
  width: 700px;
  float: right;
  padding-bottom: 50px; }

    
    

        
            
                
                     My title
                

                
                     Irrelevant information 
                    This text should disappear
                    This text should disappear
                    This text should disappear
                    This text should disappear
                

                 
                     Navigation 
                     This text should stay (below title) 
                     This text should stay (below title) 
                     This text should stay (below title) 
                     This text should stay (below title) 
                     This text should stay (below title) 
                     This text should stay (below title) 
                
            
        

        
             Here comes the normal text. Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.  

             Here comes the normal text. Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.  
 Here comes the normal text. Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.  
 Here comes the normal text. Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.  
 Here comes the normal text. Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.  
 Here comes the normal text. Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.  

             Here comes the normal text. Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.

Rickard Elim&#228;&#228; · Accepted Answer

First, never use float when creating a layout. That's stuff that were used like 10-20 years ago on the web. Use flex or grid.

I removed some CSS code and the .header element.

I added a few new lines of CSS, which I marked out with a full empty row to separate it from the old CSS code.

The biggest change were done to the .wrapper, where I changed the fixed width of 1060px to a max-width of 1060px to make the page more responsive. I also added display: flex to make columns out of header and section.

I added a grey background in header just to show case how the layout works..

.wrapper {
  max-width: 1060px;
  
  width: 100%;
  margin: 0 auto;
  display: flex;
}

header {
  width: 270px;
  /*float: left;
  top: 0px;
  max-height: 100%;*/
  
  background-color: grey;
  padding: 0.5rem;
}

/*.heady {
  /*position: relative;
  background-color: white;
}*/

.headx {
  position: sticky;
  background-color: white;
  top: 0px;
  z-index: 10;
}

#header01 {
  padding-bottom: 1em;
}

#header02 {
  top: 48px;
  z-index: 9 /*!important*/;
}

/*section {
  width: 700px;
  padding-bottom: 50px;
}*/


  

    
      
        
           My title
        

        
           Irrelevant information 
          This text should disappear
          This text should disappear
          This text should disappear
          This text should disappear
        

        
           Navigation 
           This text should stay (below title) 
           This text should stay (below title) 
           This text should stay (below title) 
           This text should stay (below title) 
           This text should stay (below title) 
           This text should stay (below title) 
        
      
    

    
       Here comes the normal text. Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text. 

       Here comes the normal text. Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text. 
       Here comes the normal text. Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text. 
       Here comes the normal text. Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text. 
       Here comes the normal text. Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text. 
       Here comes the normal text. Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text. 

       Here comes the normal text. Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
        comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.

Position:sticky does not work on website header

Answers (1)

Related Questions