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

Question

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

我知道如何让它在滚动时消失在我想要的高度，但我不知道如何让它在用户向上滚动一点时重新出现。

Answer 1

请按照我提到的“滚动到顶部时重新出现导航栏”的示例进行操作var didScroll;var lastScrollTop = 0;var delta = 5;var navbarHeight = $('header').outerHeight();$(window).scroll(function(event) {&nbsp; &nbsp; didScroll = true;});setInterval(function() {&nbsp; &nbsp; if (didScroll) {&nbsp; &nbsp; &nbsp; &nbsp; hasScrolled();&nbsp; &nbsp; &nbsp; &nbsp; didScroll = false;&nbsp; &nbsp; }}, 250);function hasScrolled() {&nbsp; &nbsp; var st = $(this).scrollTop();&nbsp; &nbsp; // Make scroll more than delta&nbsp; &nbsp; if (Math.abs(lastScrollTop - st) <= delta)&nbsp; &nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; // If scrolled down and past the navbar, add class .nav-up.&nbsp; &nbsp; if (st > lastScrollTop && st > navbarHeight) {&nbsp; &nbsp; &nbsp; &nbsp; // Scroll Down&nbsp; &nbsp; &nbsp; &nbsp; $('header').removeClass('nav-down').addClass('nav-up');&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; // Scroll Up&nbsp; &nbsp; &nbsp; &nbsp; if (st + $(window).height() < $(document).height()) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('header').removeClass('nav-up').addClass('nav-down');&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; lastScrollTop = st;}// Hide header on scroll down&nbsp; &nbsp; var didScroll;&nbsp; &nbsp; var lastScrollTop = 0;&nbsp; &nbsp; var delta = 5;&nbsp; &nbsp; var navbarHeight = $('header').outerHeight();&nbsp; &nbsp; $(window).scroll(function(event){&nbsp; &nbsp; &nbsp; didScroll = true;&nbsp; &nbsp; });&nbsp; &nbsp; setInterval(function() {&nbsp; &nbsp; &nbsp; if (didScroll) {&nbsp; &nbsp; &nbsp; &nbsp; hasScrolled();&nbsp; &nbsp; &nbsp; &nbsp; didScroll = false;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }, 250);&nbsp; &nbsp; function hasScrolled() {&nbsp; &nbsp; &nbsp; var st = $(this).scrollTop();&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; // Make scroll more than delta&nbsp; &nbsp; &nbsp; if(Math.abs(lastScrollTop - st) <= delta)&nbsp; &nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; // If scrolled down and past the navbar, add class .nav-up.&nbsp; &nbsp; &nbsp; if (st > lastScrollTop && st > navbarHeight){&nbsp; &nbsp; &nbsp; &nbsp; // Scroll Down&nbsp; &nbsp; &nbsp; &nbsp; $('header').removeClass('nav-down').addClass('nav-up');&nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; // Scroll Up&nbsp; &nbsp; &nbsp; &nbsp; if(st + $(window).height() < $(document).height()) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('header').removeClass('nav-up').addClass('nav-down');&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; lastScrollTop = st;&nbsp; &nbsp; }body {&nbsp; &nbsp; &nbsp; background: #eee;&nbsp; &nbsp; &nbsp; padding-top: 40px;&nbsp; &nbsp; &nbsp; margin: 0;&nbsp; &nbsp; }&nbsp; &nbsp; header {&nbsp; &nbsp; &nbsp; background: #ddd;&nbsp; &nbsp; &nbsp; height: 50px;&nbsp; &nbsp; &nbsp; position: fixed;&nbsp; &nbsp; &nbsp; top: 0;&nbsp; &nbsp; &nbsp; transition: top 0.2s ease-in-out;&nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; text-align: center;&nbsp; &nbsp; }&nbsp; &nbsp; header li {&nbsp; &nbsp; &nbsp; list-style: none;&nbsp; &nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; }&nbsp; &nbsp; header a {&nbsp; &nbsp; &nbsp; color: #222;&nbsp; &nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; &nbsp; padding: 0 15px;&nbsp; &nbsp; &nbsp; text-transform: uppercase;&nbsp; &nbsp; &nbsp; letter-spacing: 1px;&nbsp; &nbsp; }&nbsp; &nbsp; .nav-up {&nbsp; &nbsp; &nbsp; top: -50px;&nbsp; &nbsp; }&nbsp; &nbsp; main {&nbsp; &nbsp; &nbsp; height: 2000px;&nbsp; &nbsp; }&nbsp; &nbsp; footer {&nbsp;&nbsp; &nbsp; &nbsp; background: #ddd;&nbsp; &nbsp; &nbsp; height: 45px;&nbsp; &nbsp; &nbsp; line-height: 45px;&nbsp; &nbsp; &nbsp; text-align: center;&nbsp; &nbsp; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><header class="nav-down">&nbsp; &nbsp; <ul>&nbsp; &nbsp; <li><a href="">menu item</a></li>&nbsp; &nbsp; <li><a href="">menu item</a></li>&nbsp; &nbsp; <li><a href="">menu item</a></li>&nbsp; &nbsp; </ul>&nbsp; </header>&nbsp; <main>&nbsp; &nbsp;&nbsp;&nbsp; </main>&nbsp; <footer>&nbsp; &nbsp; Footer&nbsp; </footer>