Hide Header on Scroll Down After a Certain Point?

Question

I have this code, used fromhttps://www.w3schools.com/howto/howto_js_navbar_hide_scroll.asp

I'm wondering if it's possible to amend this so that the header only disappears on scroll after a certain height says 120px from the top of the page. Here's the code I have currently:

 var prevScrollpos = window.pageYOffset; window.onscroll = function() { var currentScrollPos = window.pageYOffset; if (prevScrollpos > currentScrollPos) { document.getElementById("navbar").style.top = "0"; } else { document.getElementById("navbar").style.top = "-50px"; } prevScrollpos = currentScrollPos; }

 #navbar { background-color: #333; /* Black background color */ position: fixed; /* Make it stick/fixed */ top: 0; /* Stay on top */ width: 100%; /* Full width */ transition: top 0.3s; /* Transition effect when sliding down (and up) */ } /* Style the navbar links */ #navbar a { float: left; display: block; color: white; text-align: center; padding: 15px; text-decoration: none; } #navbar a:hover { background-color: #ddd; color: black; } section { background-color: grey; margin-top: 50px; }

 <div id="navbar"> <a href="#home">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> </div> <section>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean accumsan tincidunt massa in tristique. Vestibulum mattis erat sed porttitor cursus. Praesent dignissim, sem vel tincidunt venenatis, dolor orci sollicitudin ipsum, et vestibulum mauris ex non felis. Cras pulvinar lectus eu risus lobortis malesuada. Sed accumsan metus quis ante scelerisque molestie. Maecenas molestie arcu in massa egestas tempus. Vestibulum augue purus, tincidunt ut porta quis, pulvinar imperdiet neque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque id convallis odio. Sed fringilla rutrum nulla. Nam diam ex, gravida at nisl vel, feugiat vehicula ex. Duis et ligula vitae velit pretium finibus quis sit amet diam. Sed ac interdum magna, a pharetra ante. Quisque vestibulum luctus ligula, elementum aliquam sem molestie non. Maecenas auctor magna a magna hendrerit, ornare facilisis tortor finibus. Nulla eu augue leo. Donec euismod scelerisque porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula sit amet nisi eu porttitor. Donec dictum quis erat ut tincidunt. Curabitur pharetra iaculis purus. In hac habitasse platea dictumst. Aenean egestas laoreet lorem, ac eleifend magna. Sed quis feugiat diam. Nunc euismod dapibus mauris quis egestas. Nam venenatis magna sit amet lorem semper, eget sagittis dolor malesuada. Sed fringilla pulvinar maximus. In venenatis ligula magna, id pulvinar magna auctor condimentum. Aliquam dictum erat sit amet elit tristique feugiat. Curabitur feugiat nunc ultricies sapien finibus condimentum. Duis gravida, ipsum sit amet luctus vulputate, odio quam ornare sapien, non aliquam enim metus eget dolor. Duis nisl lorem, tempor non cursus nec, lobortis vel nibh. Suspendisse consectetur sed nisl in vestibulum. Nunc at placerat ante. Donec ante massa, mollis vel ultricies sed, ullamcorper at risus. Morbi euismod laoreet sagittis.</section>

Currently, the header disappears as soon as you start scrolling down, but I'd like it to stay visible until after you've scrolled past the height of the header.

Hopefully, that makes sense.

Answer 1

You can just check when the scroll position is greater than 120 and then make it disappear, revert it back when it's less than 120

  window.onscroll = function() {
    var currentScrollPos = window.pageYOffset;
    if (currentScrollPos > 120) {
      document.getElementById("navbar").style.top = "-50px";
    } else {
      document.getElementById("navbar").style.top = "0px";

    }
  }