在页面滚动时偏移到 show/hide 导航菜单

Question

正在尝试使页面滚动位置上的 show/hide 导航菜单偏移 100 像素。这是 show/hide 一次鼠标滚动导航，我已将 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>

那么如何show/hide在鼠标滚动位置100px导航。示例 fiddle。
我的意思是它只在您向上滚动页面时显示导航菜单并且它以正确的方式发生。但是我想在页面向上滚动 100px 后显示，意味着显示方式不正确，想要在页面向上滚动 100px 后显示和隐藏。

提前致谢。

Answer 1

这个 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 2

$(window).scrollTop() returns 从顶部开始的滚动量（以像素为单位），所以只需写：

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

Answer 3

给你。顺便说一句，medium.com 做得很好。他们甚至写了一篇 post 来说明他们是如何做到的。如果你真的想完善你的解决方案，你可能想检查一下：

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

在页面滚动时偏移到 show/hide 导航菜单

Offset to show/hide navigation menu on page scroll

html

javascript

jquery

scroll

offset