向下滾動時隱藏導航欄，向上滾動時顯示

Question

我想在向下滾動時隱藏我的頂部導航欄，並在像這個網站導航欄一樣向上滾動時顯示。 目前，我正在使用此代碼，但它無法正常工作，它在向下滾動時有效，但在向上滾動時無效。

 <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

不需要setInterval(function() {...因為即使用戶沒有滾動，你也會不停地執行 function，將其替換為用於滾動的eventListener ，

您的#main-nav只是上下滑動，您需要根據滾動條更改它的 position 以使其在向下滑動時可見，

盡量避免 jquery animation 並盡可能使用 css 轉換效果，這對性能有好處，

這是一個示例（沒有 jQuery ），根據您的需要進行調整：

 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

當用戶向下滾動時，隱藏navbar 。 當用戶向上滾動時，顯示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;
}

我將下面的 JavaScript 用於我的代碼，因為我有一個復選框作為漢堡包圖標，單擊該圖標時會切換nav欄。 當用戶在移動設備上按下漢堡包圖標時，會顯示nav欄，但當他向下滾動時， nav欄會隱藏，當他向上滾動時， nav欄會重新顯示：

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