Vertical scroll jumps when menubar fixes to top of screen

Question

I've written a web page with a menu header that, when the page is scrolled down, fixes to the top when the menu header reaches the top of the page. But the code I found (absolute javascript beginner) and implemented creates a jump in the scrolling. From what I understand, this has to do with the css div height "vanishing" once I fix it to the top of the page. HTML:

  <div class="home-header">
    <div class="caption">
    </div>
  </div>

  <div class="header" id="header">
    <ul class="nav">
      <li><a href="">PAGE 1</a></li>
      <li><a href="">PAGE 2</a></li>
      <li><a href="">PAGE 3</a></li>
      <li><a href="">PAGE 4</a></li>
    </ul>
  </div>

CSS:

body {
  margin: 0;
}
.home-header {
  display: flex;
  justify-content: center;
  align-items: center;
  background: url('https://images.unsplash.com/photo-1495443396064-16fd983acb6a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80') center no-repeat;
  background-size: cover;
  width: 100vw;
  height: 35vw;
}
.caption {
  color: #f2f2ee;
}
/* NAVIGATION */
.header {
  padding-top: 5px;
  padding-bottom: 5px;
  font-family: proxima-nova, sans-serif;
  font-weight: 400;
  font-style: normal;
  background: #888;
}
.sticky {
  position: fixed;
  top: 0;
  background-color: #18361f;
  width: 100%;
  background: #888;
}
.nav {
  width: 100%;
  padding: 0;
  display: table;
  text-align: center;
  font-size: 1rem;
  list-style: none;
}
.nav li {
  display: inline-block;
  float: none;
  margin-right: 15px;
  margin-left: 15px;
}

Javascript:

window.onscroll = function() {myFunction()};

    var header = document.getElementById("header");
    var sticky = header.offsetTop;

    function myFunction() {
      if (window.pageYOffset > sticky) {
        header.classList.add("sticky");
      } else {
        header.classList.remove("sticky");
      }
    }

JSFiddle of the code with the problem. I currently run the javascript code directly in my html file with <script> </script> commands. I've tried the stackexchange answer here , but it doesn't work, and another solution I found (I can't find the stackexchange page anymore), causes the menubar to jump to the top of the browser screen before it should actually arrive there. Is there another solution I can use to fix this scroll jumping issue? (I did add the jquery api into the header of my html when I ran the above solution code.)

Answer 1

You might want to use position: sticky; ...

.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

... it's rather new so watch your browser version requirements.

Edit: a pen for this... https://codepen.io/bstees/pen/yLyMZYE

Answer 2

You can do this with just CSS no JavaScript required. I've modified your fiddle to do just that.

I added these to your header CSS class.

position: sticky;
top: 0;

https://jsfiddle.net/jd3etnyc/

 body { margin: 0; } .home-header { display: flex; justify-content: center; align-items: center; background: url('https://images.unsplash.com/photo-1495443396064-16fd983acb6a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80') center no-repeat; background-size: cover; width: 100vw; height: 35vw; } .caption { color: #f2f2ee; } /* NAVIGATION */ .header { padding-top: 5px; padding-bottom: 5px; font-family: proxima-nova, sans-serif; font-weight: 400; font-style: normal; background: #888; position: sticky; top: 0; } .sticky { position: fixed; top: 0; background-color: #18361f; width: 100%; background: #888; } .nav { width: 100%; padding: 0; display: table; text-align: center; font-size: 1rem; list-style: none; } .nav li { display: inline-block; float: none; margin-right: 15px; margin-left: 15px; }

 <div class="home-header"> <div class="caption"> </div> </div> <div class="header" id="header"> <ul class="nav"> <li><a href="">PAGE 1</a></li> <li><a href="">PAGE 2</a></li> <li><a href="">PAGE 3</a></li> <li><a href="">PAGE 4</a></li> </ul> </div> blabla1<br>blabla2<br>blabla3<br>blabla4<br>blabla5<br>blabla6<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla <br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla

Answer 3

Sticky headers overlay other elements on the page. Prior to scrolling, you will need to add a "buffer" to the content so it is not initially overlay-ed. This buffer is achieved with margin/padding and usually starts with an amount that matches the height of the sticky header.

Below I've updated your code to add this "buffer" via a class.

Note: This is for sticky headers using fixed positioning.

 window.onscroll = function() { myFunction() }; var header = document.getElementById("header"); var main = document.querySelector( 'main' ); var sticky = header.offsetTop; function myFunction() { if (window.pageYOffset > sticky) { header.classList.add("sticky"); main.classList.add( 'sticky-buffer' ); } else { header.classList.remove("sticky"); main.classList.remove( 'sticky-buffer' ); } }

 body { margin: 0; } .home-header { display: flex; justify-content: center; align-items: center; background: url('https://images.unsplash.com/photo-1495443396064-16fd983acb6a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80') center no-repeat; background-size: cover; width: 100vw; height: 35vw; } .caption { color: #f2f2ee; } /* NAVIGATION */ .header { padding-top: 5px; padding-bottom: 5px; font-family: proxima-nova, sans-serif; font-weight: 400; font-style: normal; background: #888; } .sticky { position: fixed; top: 0; background-color: #18361f; width: 100%; background: #888; } .sticky-buffer { padding-top: 60px; /* <-- .header height */ } .nav { width: 100%; padding: 0; display: table; text-align: center; font-size: 1rem; list-style: none; } .nav li { display: inline-block; float: none; margin-right: 15px; margin-left: 15px; }

 <div class="home-header"> <div class="caption"> </div> </div> <div class="header" id="header"> <ul class="nav"> <li><a href="">PAGE 1</a></li> <li><a href="">PAGE 2</a></li> <li><a href="">PAGE 3</a></li> <li><a href="">PAGE 4</a></li> </ul> </div> <main> blabla1 <br> blabla2 <br> blabla3 <br> blabla4 <br> blabla5 <br> blabla6 <br> blabla <br> blabla <br> blabla <br> blabla <br> blabla <br> blabla <br> blabla <br> blabla <br> blabla <br> blabla <br> blabla <br> blabla <br> blabla <br> blabla <br> blabla <br> blabla <br> blabla <br> blabla <br> blabla <br> blabla <br> blabla <br> blabla <br> blabla <br> blabla <br> blabla <br> blabla <br> blabla <br> blabla <br> blabla <br> blabla </main>