Search code examples
htmlcsscss-positionsticky

Position:sticky does not work on website header


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 <br> 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; }
    <body>
    <div class="wrapper">

        <header>
            <div class="header">
                <div class="headx" id="header01">
                    <h1> My title</h1>
                </div>

                <div class="heady">
                    <h2> Irrelevant information </h2>
                    <p>This text should disappear</p>
                    <p>This text should disappear</p>
                    <p>This text should disappear</p>
                    <p>This text should disappear</p>
                </div>

                 <div class="headx" id="header02">
                    <h2> Navigation </h2>
                    <p> This text should stay (below title) </p>
                    <p> This text should stay (below title) </p>
                    <p> This text should stay (below title) </p>
                    <p> This text should stay (below title) </p>
                    <p> This text should stay (below title) </p>
                    <p> This text should stay (below title) </p>
                </div>
            </div>
        </header>

        <section>
            <p> Here comes the normal text. Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text. </p> 

            <p> Here comes the normal text. Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text. </p> 
<p> Here comes the normal text. Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text. </p> 
<p> Here comes the normal text. Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text. </p> 
<p> Here comes the normal text. Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text. </p> 
<p> Here comes the normal text. Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text. </p> 

            <p> Here comes the normal text. Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text. </p> 

        </section>


Solution

  • 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;
    }*/
    <body>
      <div class="wrapper">
    
        <header>
          <!--<div class="header">-->
            <div class="headx" id="header01">
              <h1> My title</h1>
            </div>
    
            <div class="heady">
              <h2> Irrelevant information </h2>
              <p>This text should disappear</p>
              <p>This text should disappear</p>
              <p>This text should disappear</p>
              <p>This text should disappear</p>
            </div>
    
            <div class="headx" id="header02">
              <h2> Navigation </h2>
              <p> This text should stay (below title) </p>
              <p> This text should stay (below title) </p>
              <p> This text should stay (below title) </p>
              <p> This text should stay (below title) </p>
              <p> This text should stay (below title) </p>
              <p> This text should stay (below title) </p>
            </div>
          <!-- </div> -->
        </header>
    
        <section>
          <p> Here comes the normal text. Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
            comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
            comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
            comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
            comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text. </p>
    
          <p> Here comes the normal text. Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
            comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
            comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
            comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
            comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text. </p>
          <p> Here comes the normal text. Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
            comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
            comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
            comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
            comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text. </p>
          <p> Here comes the normal text. Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
            comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
            comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
            comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
            comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text. </p>
          <p> Here comes the normal text. Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
            comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
            comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
            comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
            comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text. </p>
          <p> Here comes the normal text. Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
            comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
            comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
            comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
            comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text. </p>
    
          <p> Here comes the normal text. Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
            comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
            comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
            comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here
            comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text.Here comes the normal text. </p>
    
        </section>