如何使页眉在向下滚动时淡出/消失，并在向上滚动时重新出现？

Question

我已经看了相当多的时间，偶然发现了一些教程，到目前为止，我并没有取得太多的成就。我想做的是让我的网站顶部的标题消失时，用户滚动下来，并重新出现时，他们滚动到页面的顶部。

到目前为止我的代码是：

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

CSS：

header {
  margin:0px auto;
  text-align:center;
  position:fixed;
  width: 100%;
  top:0;
  z-index:999;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  float:left;  
  background: #34373d;
  transition: top 0.2s ease-in-out;
}

.nav-up {
    top: -40px;
}

当我向下滚动时，两个标头都是固定的，不要按我说的做(当然，我还没有告诉第二个头做任何事情，我会实现的，一旦我得到了第一个功能)

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

Answer 1

检查this是否能帮助您

jQuery

var lastScrollTop = 0;

$(window).scroll(function () {

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

Answer 2

对于这些操作，我总是使用jQuery的scrollTop。

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

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

Answer 3

我最近回答了非常类似的问题。经过一些修改后，它应该可以满足您的需要：CLICK

直接链接到JSFiddle：http://jsfiddle.net/silveraven/WgL9z/10/

Code just to put jsfiddle link...