Javascript 如何使标题在向下滚动时淡出/消失，在向上滚动时重新出现？

我已经环顾了很多地方，偶然发现了一些教程，到目前为止，我并没有取得太大的成就。我想做的是，当用户向下滚动时，我网站的顶部标题消失，当他们滚动到页面顶部时，标题重新出现。
到目前为止，我的代码是：

  <header class="top-nav">
      <div class="top-nav">
      <!-- Top Row -->
      <div class="top">  
        <div class="container">
          <div class="row vh-center">   
            <div class="col-md-5 slogan">
               Plumbing and Remodelling Services.
            </div>
            <div class="col-md-2">          
              <a href="index.html">
                <img src="img/logo.png" alt="logo" class="logo">
              </a>
            </div>
            <div class="col-md-5 top-social right">
              <div class="social-3 right">
                <a href="index.html#"><i class="icon-facebook"></i></a>
                <a href="index.html#"><i class="icon-dribbble"></i></a>
                <a href="index.html#"><i class="icon-twitter"></i></a>
                <a href="index.html#"><i class="icon-tumblr"></i></a>
              </div>
            </div>
          </div>
        </div>
      </div>
           <!-- Top Row End -->
    <script type="text/javascript">
        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();

            if(Math.abs(lastScrollTop - st) <= delta)
                return;

            if (st > lastScrollTop && st > navbarHeight){
                $('header').removeClass('top-nav').addClass('nav-up');
            } else {
                if(st + $(window).height() < $(document).height()) {
                    $('header').removeClass('nav-up').addClass('top-nav');
                }
            }

        lastScrollTop = st;
        }
    </script>
</div>
</header>

<header id="home">
    <!-- Navigation --> 
        <div class="navigation">    

      <div class="container">
        <div class="row vh-center">   

                <ul class="nav" id="nav">
                    <li>
              <!-- Menu Link -->
                        <a href="index.html#home" title="About">
                            <span>About</span>
                        </a>
              <!-- Menu Link End -->
                    </li>
                    <li>
                        <a href="http://www.terrylove.com/forums/index.php" title="Forums" target='_blank'>
                            <span>Forums</span>
                        </a>
                    </li>
                    <li>
                        <a href="index.html#event" title="Something">
                            <span>Renovations?</span>
                        </a>
                    </li>
                    <li>
                        <a href="index.html#portfolio" title="Something">
                            <span>Plumbing?</span>
                        </a>
                    </li>
                    <li>
                        <a href="index.html#team" title="Something">
                            <span>Stories?</span>
                        </a>
                    </li>
                    <li>
                        <a href="index.html#blog" title="Something">
                            <span>Pricing</span>
                        </a>
                    </li>
                    <li>
                        <a href="index.html#contact" title="Contact">
                            <span>Contact</span>
                        </a>
                    </li>
                </ul>
          <select class="select-menu"></select> <!-- select menu for small screens -->

        </div> 
      </div> 

    </div>          
    <!-- Navigation End -->    
  </header>

当我向下滚动时，两个标题都是固定的，不会执行我所说的操作（当然，我没有告诉第二个标题执行任何操作，我会在第一个标题运行后执行该操作）

---

有谁能告诉我我做错了什么，以及如何解决这个问题

我总是使用jQuery的scrollTop来执行这些操作

    $(window).scroll(function(event){
        toggleHeader();
    });

    function toggleHeader() {
        $('header').toggle( $(window).scrollTop() < 50 );
    }

$（窗口）。滚动（函数（事件）{
toggleHeader（）；
});
函数toggleHeader（）{
$（'header'）。切换（$（窗口）.scrollTop（）<50）；
}

我总是使用jQuery的scrollTop来执行这些操作

    $(window).scroll(function(event){
        toggleHeader();
    });

    function toggleHeader() {
        $('header').toggle( $(window).scrollTop() < 50 );
    }

$（窗口）。滚动（函数（事件）{
toggleHeader（）；
});
函数toggleHeader（）{
$（'header'）。切换（$（窗口）.scrollTop（）<50）；
}

检查是否有帮助

jQuery

var lastScrollTop = 0;

$(window).scroll(function () {

var st = $(this).scrollTop();
        if (st < lastScrollTop){
            $('.navbar ').fadeIn();
        } else {
          $('.navbar ').fadeOut();
        }
        lastScrollTop = st;
  })

var lastScrollTop=0；
$（窗口）。滚动（函数（）{
var st=$（this.scrollTop（）；
如果（st

检查是否有帮助

jQuery

var lastScrollTop = 0;

$(window).scroll(function () {

var st = $(this).scrollTop();
        if (st < lastScrollTop){
            $('.navbar ').fadeIn();
        } else {
          $('.navbar ').fadeOut();
        }
        lastScrollTop = st;
  })

var lastScrollTop=0；
$（窗口）。滚动（函数（）{
var st=$（this.scrollTop（）；
如果（st

我最近回答了一个非常类似的问题。稍作修改后，它应该适合您的需要：

直接链接到JSFIDLE：

---

我最近回答了一个非常类似的问题。稍作修改后，它应该适合您的需要：

直接链接到JSFIDLE：

---

好的，很酷，那么你将如何实现这一点？我应该用这个替换上面的脚本吗？是的，用标题应该隐藏/显示的位置替换“50”。我试过了，但它在滚动时仍然没有任何作用。好的，很酷，那么你将如何实现这一点？我应该用这个替换上面的脚本吗？是的，用标题应该隐藏/显示的位置替换“50”。我试过了，但它在滚动时仍然没有任何作用。我做了，不幸的是，它仍然对我毫无用处。好吧，虽然它有效，但它有点不起作用。它在向下滚动时消失，但每次向上滚动时都会重新出现。我怎样才能选择它应该在什么时候消失和重新出现？哦，对不起！你的代码非常适合我的顶部标题，但我在底部导航栏中使用了这段代码：我想在我选择时只向下/向上滚动，我不知道该怎么做。我做了，不幸的是，它仍然对我没有任何作用。好吧，虽然它有效，但有点不起作用。它在向下滚动时消失，但每次向上滚动时都会重新出现。我怎样才能选择它应该在什么时候消失和重新出现？哦，对不起！您的代码非常适合我的顶部标题，但我将此代码用于底部导航栏：我希望在选择时只向下/向上滚动，我不知道如何执行此操作。