我想在向上滚动时显示粘性菜单导航,同时在显示导航菜单之前也有延迟。我可以通过动画和不透明度来做到这一点,但它并没有那么有效。
我尝试从当前位置向上滚动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;
});
注意:我在Headroom.js的脚本中看到了这个功能
我该怎么做?
答案 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;
});