向下滚动时隐藏导航栏，向上滚动时显示

Question

I want to hide my top nav bar when scrolls down and show when scrolls up like this website nav bar. currently, I am using this code but it's not working properly, it works when scrolling down but doesn't when scrolling up.

 <script type="text/javascript"> // Hide #main-nav on on scroll down var didScroll; var lastScrollTop = 0; var delta = 5; var navbarHeight = $('#main-nav').outerHeight(); $(window).scroll(function(event){ didScroll = true; }); setInterval(function() { if (didScroll) { hasScrolled(); didScroll = false; } }, 250); function hasScrolled() { var st = $(this).scrollTop(); // Make sure they scroll more than delta if(Math.abs(lastScrollTop - st) <= delta) return; // If they scrolled down and are past the navbar, add class.MagicMenu-up. // This is necessary so you never see what is "behind" the navbar. if (st > lastScrollTop && st > navbarHeight){ // Scroll Down $('#main-nav').slideDown(500); } else { // Scroll Up if(st + $(window).height() < $(document).height()) { $('#main-nav').slideUp(500); } } lastScrollTop = st; } </script>

Answer 1

there's no need for setInterval(function() {... as you're executing the function non-stop even when the user is not scrolling, replace it with an eventListener for the scroll,

your #main-nav is only sliding up and down, you need to change it's position according to the scroll to make i visible when it slides down,

try to avoid jquery animation and use css transition for the effect when possible, it's good for performance,

here's an example ( without jQuery ), tweak it to your needs:

 let nav = document.querySelector('#nav'); let lastScrollTop; window.addEventListener("scroll", function() { // listen for the scroll var st = window.pageYOffset || document.documentElement.scrollTop; if (st > lastScrollTop) nav.style.opacity = 0; // hide the nav-bar when going down else nav.style.opacity = 1; // display the nav-bar when going up lastScrollTop = st; nav.style.top = `${st}px`; // set the position of the nav-bar to the current scroll }, false);

 * { box-sizing: border-box; } body { height: 1000px; padding: 0; margin: 0; } #nav { width: 100%; height: 50px; background: blue; position: absolute; transition: opacity 0.5s linear; }

 <div id="nav"> </div>

Answer 2

HTML

<div id="navbar">
    <a href="#home">Home</a>
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
</div>

CSS

#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;
}

JavaScript

When the user scrolls down, hide the navbar . When the user scrolls up, show the navbar :

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;
}

I used the JavaScript below for my code since I had a checkbox as a Hamburger Icon that toggles the nav bar when the icon is clicked. when on mobile the user presses the hamburger icon, nav bar is displayed, but when he scrolls down, the nav bar is hidden, when he scrolls back up, the nav bar comes back into display:

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
    var currentScrollPos = window.pageYOffset;
    if (prevScrollpos > currentScrollPos) {
        document.getElementById("check").checked = true;
    } else {
        document.getElementById("check").checked = false;
    }
    prevScrollpos = currentScrollPos;
}