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

Question

我想在向上滚动时显示粘性菜单导航，同时在显示导航菜单之前有延迟。我可以使用动画和不透明度来做到这一点，但效果不佳。

我试图在从当前位置向上滚动 50 像素时显示导航菜单，但没有成功。

脚本如下：

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

的脚本中看到了这个功能

我该怎么做？

Answer 1

您当前的设置仅考虑大于 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;
});

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

Show nav menu after scrolling up 50px

javascript

jquery

scroll

offset