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

Question

所以我想结合这两个问题： 导航栏向下滚动消失，向上滚动重新出现/滑动 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>