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

Question

I've already looked around for quite a bit and stumbled upon some tutorials, and so far, I've achieved not so much. What I'm trying to do is make the top header of my website disappear when the user scrolls down and reappear when they scroll to the top of the page.
My code so far:

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

The 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;
}

When I scroll down, both the headers are just fixed and don't do what I'm saying (of course I haven't told the second header to do anything, I'll implement that once I've gotten the first one to function)
Can anyone tell me what I'm doing wrong and how I can resolve this issue?

Answer 1

Check if this helps you

jQuery

var lastScrollTop = 0;

$(window).scroll(function () {

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

Answer 2

I allways use jQuery's scrollTop for these actions.

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

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

Answer 3

I've answered recently for very similar question. After little modification it should fit your needs: CLICK

Direct link to JSFiddle: http://jsfiddle.net/silveraven/WgL9z/10/

Code just to put jsfiddle link...