在页面滚动时显示/隐藏导航菜单的偏移量

Question

尝试在页面滚动位置 100 像素处进行偏移以显示/隐藏导航菜单。它是在一个鼠标滚动中显示/隐藏导航，我已将 lastScroll = 0 设置为 lastScroll = 100 但不起作用。

Jquery： Fiddle

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

那么如何在鼠标滚动位置 100 像素处显示/隐藏导航。示例fiddle。
我的意思是它只在您向上滚动页面时显示导航菜单并且它以正确的方式发生。但我想在向上滚动页面 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 应该可以工作 :)

Javascript

$(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).on('scroll',function() {    
    console.log($(window).scrollTop());
    var scroll = $(window).scrollTop();
    if(scroll > 100){
        $(".nav").addClass("darkHeader");
    } else {
        $(".nav").removeClass("darkHeader");
    } 
});