Revealing / Hiding Fixed Menu (jQuery)

Question

I am trying to fix and animate a header navigation so that it pops down from outside of the browser window when a user scrolls past 80px from the top. I then want to reverse the animation when the user scrolls back past <80px. I have gotten this far (have set throttle function earlier in the code):

var e = $(window).scrollTop();
$(window).on("scroll", throttle(function() {
        var t = $(window).scrollTop();
        t > 80 ? t > e ? $(header).animate({
          top: "-150px"
        }, 200) :

At the 'else' point I am totally stuck. I've been looking at other similar functions and trying to interpret the code but really struggling. Any help hugely appreciated.

Answer 1

Why are you comparing it with e (which will be usually 0 ). That's no point. If you want something to happen when the window 's scrollTop becomes 80px , just use the following code. Also please not the single true parameter in the animate 's stop() function.

 $(function () { $(".peek-a-boo").css({ top: -200 }); $(window).scroll(function () { if ($(window).scrollTop() > 80) $(".peek-a-boo").stop(true).animate({ top: 0 }, 200); else $(".peek-a-boo").animate({ top: -200 }, 200); }); }); 

 * {box-sizing: border-box;} .peek-a-boo {position: fixed; background-color: #99f; width: 100%; top: 0; left: 0; padding: 5px; text-align: center;} .heighter {height: 1000px;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <header class="peek-a-boo">Peek</header> <div class="heighter"></div>