偏移以顯示/隱藏頁面滾動上的導航菜單

Question

嘗試設置偏移量以在頁面滾動位置100px上顯示/隱藏導航菜單。 它是在一個鼠標滾動中顯示/隱藏導航，我已將lastScroll = 0設置為lastScroll = 100但不起作用。

jQuery： 小提琴

// Script
lastScroll = 0;
$(window).on('scroll',function() {    
    var scroll = $(window).scrollTop();
    if(scroll === 0){
        $(".nav").removeClass("darkHeader");
    } else if(lastScroll - scroll > 0) {
        $(".nav").addClass("darkHeader");
    } else {
        $(".nav").removeClass("darkHeader");
    }
    lastScroll = scroll;
});

HTML：

<div class="nav">
Sticky top navigation bar
</div>
<div class="wrap">
<h3>Some filler text</h3>
Bacon ipsum dolor sit amet mollit ball tip occaecat brisket cupidatat meatball capicola. Capicola rump turducken, elit shankle cupidatat pastrami duis fatback. Sint occaecat kielbasa labore pastrami corned beef. Sunt swine bacon, fugiat dolor aute anim jerky nostrud et venison shankle consectetur boudin landjaeger.
Pork chop sed turkey aute, duis corned beef pariatur short loin proident culpa. Capicola filet mignon fugiat corned beef shank ea, commodo doner adipisicing eu salami. Doner laboris pariatur beef ribs non id. Andouille eu meatball consectetur ham hock. Ea dolore cillum cow pork loin aliquip leberkas id est corned beef dolore t-bone. In salami jerky cupidatat et.
</div>

因此，如何在鼠標滾動位置100px中顯示/隱藏導航。 小提琴的例子。
我的意思是，當您向上滾動頁面時，它僅顯示導航菜單，並且以正確的方式發生。 但是我想在向上滾動頁面100px后顯示，意味着沒有顯示正確的方式，要在100px向上滾動頁面后顯示和隱藏。

提前致謝。

Answer 1

干得好。 順便說一句，medium.com做得很好。 他們甚至寫了一篇關於他們如何做的文章。 如果您確實想完善解決方案，則可能需要檢查一下：

https://medium.com/@mariusc23/hide-header-on-scroll-down-show-on-scroll-up-67bbaae9a78c

var lastScroll = 0;
var scrollUpStart = 0;
$(window).on('scroll',function() {

    var scroll = $(window).scrollTop();
    if(scroll === 0){
        // we are at the top
        $(".nav").removeClass("darkHeader");
    } else if(lastScroll > scroll) {
        // we are scrolling up

        // we check if we have started scrolling up already
        if (scrollUpStart < scroll) {
            // if we just started scrolling up, we set 
            // the scrollUpStart to the current scroll value
            scrollUpStart = scroll;
        }

        // if we continue scrolling up, the difference between 
        // scrollUpStart and scroll will eventually reach a 100px
        if (scrollUpStart - scroll > 100) {
            $(".nav").addClass("darkHeader");
        }

    } else {
        // we are scrolling down
        // reset scrollUpStart
        scrollUpStart = 0;
        $(".nav").removeClass("darkHeader");
    }
    lastScroll = scroll;
});

Answer 2

這個JS應該工作:)

Java腳本

$(window).on('scroll',function() {
    var scroll = $(window).scrollTop();
    if(scroll >= 100){
        $('.nav').fadeOut();
    } else {
        if(!$('.nav').is(":visible")){
            $('.nav').fadeIn();
        }
    }
});

http://jsfiddle.net/9fbr320y/16/

Answer 3

$(window).scrollTop()返回$(window).scrollTop()的滾動量（以像素為單位），因此只需編寫：

$(window).on('scroll',function() {    
    console.log($(window).scrollTop());
    var scroll = $(window).scrollTop();
    if(scroll > 100){
        $(".nav").addClass("darkHeader");
    } else {
        $(".nav").removeClass("darkHeader");
    } 
});