如何使导航栏重新出现在滚动到顶部

Question

所以我想结合这两个问题： 导航栏向下滚动消失，向上滚动重新出现 w/slide Bootstrap 4 - 如何使固定顶部导航栏在滚动时消失

我知道如何让它在我想要的高度滚动时消失，但我无法弄清楚如何在用户向上滚动时让它重新出现。

Answer 1

请按照我提到的“导航栏重新出现在滚动到顶部”中的示例进行操作

 var didScroll; var lastScrollTop = 0; var delta = 5; var navbarHeight = $('header').outerHeight(); $(window).scroll(function(event) { didScroll = true; }); setInterval(function() { if (didScroll) { hasScrolled(); didScroll = false; } }, 250); function hasScrolled() { var st = $(this).scrollTop(); // Make scroll more than delta if (Math.abs(lastScrollTop - st) <= delta) return; // If scrolled down and past the navbar, add class .nav-up. if (st > lastScrollTop && st > navbarHeight) { // Scroll Down $('header').removeClass('nav-down').addClass('nav-up'); } else { // Scroll Up if (st + $(window).height() < $(document).height()) { $('header').removeClass('nav-up').addClass('nav-down'); } } lastScrollTop = st; }

 // Hide header on scroll down var didScroll; var lastScrollTop = 0; var delta = 5; var navbarHeight = $('header').outerHeight(); $(window).scroll(function(event){ didScroll = true; }); setInterval(function() { if (didScroll) { hasScrolled(); didScroll = false; } }, 250); function hasScrolled() { var st = $(this).scrollTop(); // Make scroll more than delta if(Math.abs(lastScrollTop - st) <= delta) return; // If scrolled down and past the navbar, add class .nav-up. if (st > lastScrollTop && st > navbarHeight){ // Scroll Down $('header').removeClass('nav-down').addClass('nav-up'); } else { // Scroll Up if(st + $(window).height() < $(document).height()) { $('header').removeClass('nav-up').addClass('nav-down'); } } lastScrollTop = st; }

 body { background: #eee; padding-top: 40px; margin: 0; } header { background: #ddd; height: 50px; position: fixed; top: 0; transition: top 0.2s ease-in-out; width: 100%; text-align: center; } header li { list-style: none; display: inline-block; } header a { color: #222; text-decoration: none; padding: 0 15px; text-transform: uppercase; letter-spacing: 1px; } .nav-up { top: -50px; } main { height: 2000px; } footer { background: #ddd; height: 45px; line-height: 45px; text-align: center; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <header class="nav-down"> <ul> <li><a href="">menu item</a></li> <li><a href="">menu item</a></li> <li><a href="">menu item</a></li> </ul> </header> <main> </main> <footer> Footer </footer>