向上滚动50px后显示导航菜单

时间:2017-09-06 14:34:42

标签: javascript jquery scroll offset

我想在向上滚动时显示粘性菜单导航,同时在显示导航菜单之前也有延迟。我可以通过动画和不透明度来做到这一点,但它并没有那么有效。

我尝试从当前位置向上滚动50px时显示导航菜单,但它没有用。

这是脚本:

var previousScroll = 0,
    headerOrgOffset = $('#header').height();

$('#header-wrap').height($('#header').height());

$(window).scroll(function () {
    var currentScroll = $(this).scrollTop();
    if (currentScroll > headerOrgOffset) {
        if (currentScroll > previousScroll) {
            $('#header-wrap').slideUp();
        } else {
            $('#header-wrap').slideDown();
        }
    } 
    previousScroll = currentScroll;
});

FIDDLE DEMO

注意:我在Headroom.js的脚本中看到了这个功能

我该怎么做?

1 个答案:

答案 0 :(得分:0)

您当前的设置仅考虑大于headerOrgOffset的滚动条。如果要进行下滑,则需要考虑滚动小于headerOrgOffset的情况。由于您还需要50px缓冲区,我在else语句中添加了-50。

var previousScroll = 0,
        savedScroll = 0,
    headerOrgOffset = $('#header').height();

$('#header-wrap').height($('#header').height());

$(window).scroll(function () {
    var currentScroll = $(this).scrollTop();
    if (currentScroll > headerOrgOffset) {
        if (currentScroll > previousScroll) {
            $('#header-wrap').slideUp();
            reappearScroll = currentScroll - 50;
        } else {
            if (currentScroll < reappearScroll) {
                $('#header-wrap').slideDown();
            }
        }
    } 
    previousScroll = currentScroll;
});