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

问题描述

我想在向上滚动时显示粘性菜单导航，同时在显示导航菜单之前也有延迟.我可以设置动画和不透明度，但是效果不佳.

I want to show a sticky menu nav when scrolling up while also having a delay before showing the nav menu. I can do this with animate and opacity, but it's not as effective.

当我从当前位置向上滚动50px时，我试图显示导航菜单，但这没用.

I tried to show the nav menu when scrolling up 50px from the current position, but it didn't work.

这是脚本:

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的脚本中看到了此功能

Note: I saw this feature in the script for Headroom.js

我该怎么做?

推荐答案

您当前的设置仅考虑大于headerOrgOffset的滚动.如果希望向下滑动，则需要考虑滚动小于headerOrgOffset的情况.由于您还需要50px的缓冲区，因此我在else语句中添加了-50.

Your current setup only accounts for scrolls that are greater than headerOrgOffset. If you want the slide down to happen, you need to account for cases where the scroll is less than headerOrgOffset. Since you also want a 50px buffer, I've added a -50 in the else statement.

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

这篇关于向上滚动50像素后显示导航菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！