Javascript 在页面滚动上显示/隐藏导航菜单的偏移量

正在尝试进行偏移以在页面滚动位置100px上显示/隐藏导航菜单。在一个鼠标滚动中显示/隐藏导航，我已将

lastcroll=0

设置为

lastcroll=100

，但不起作用

Jquery:

HTML:

粘性顶部导航栏
一些填充文本
培根同侧肉多洛坐在阿梅特·莫利特球尖上，在胸脯上放一个肉丸。Capicola rump turducken，elit shankle Cupidata pastrami duis肥背犬。圣奥凯卡基尔巴萨劳动熏牛肉咸牛肉。生猪培根、浓汤或动物肉干、诺斯特鲁和鹿肉香肠。
猪排烤火鸡，杜伊斯腌牛肉，里脊短肉。卡皮科拉菲力牛排，咸牛肉片，意大利腊肠。Doner laboris pariatur牛肉排骨非同一品种安都尔欧盟肉丸火腿节。这是一种多洛尔肉牛里脊肉，是一种腌制牛肉多洛尔t形骨。在意大利腊肠肉干中。

那么如何在鼠标滚动位置100px显示/隐藏导航。实例
我的意思是，只有当你们向上滚动页面时，它才会显示导航菜单，而且发生的方式是正确的。但我想显示后向上滚动页面100px，意味着没有显示正确的方式，要显示和隐藏后向上滚动页面100px

提前谢谢。

这个JS应该可以工作：）

Javascript

$(window).on('scroll',function() {
    var scroll = $(window).scrollTop();
    if(scroll >= 100){
        $('.nav').fadeOut();
    } else {
        if(!$('.nav').is(":visible")){
            $('.nav').fadeIn();
        }
    }
});

这个JS应该可以工作：）

Javascript

$(window).on('scroll',function() {
    var scroll = $(window).scrollTop();
    if(scroll >= 100){
        $('.nav').fadeOut();
    } else {
        if(!$('.nav').is(":visible")){
            $('.nav').fadeIn();
        }
    }
});

$（窗口）.scrollTop（）返回从顶部开始的滚动量（以像素为单位），因此只需编写：

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

$（窗口）.scrollTop（）
以像素为单位返回从顶部开始的滚动量，因此只需编写：

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

给你。顺便说一句，media.com做得很好。他们甚至写了一篇关于他们是如何做到这一点的帖子。如果您真的想完善您的解决方案，您可能需要查看它：


var lastcroll=0；
var scrollUpStart=0；
$（窗口）.on（'scroll'，function（）{
var scroll=$（窗口）.scrollTop（）；
如果（滚动===0）{
//我们在顶端
$（“.nav”）.removeClass（“darkHeader”）；
}else if（最后滚动>滚动）{
//我们正在向上滚动
//我们检查是否已经开始向上滚动
如果（滚动启动<滚动）{
//如果我们刚刚开始向上滚动，我们将
//将scrollUpStart设置为当前滚动值
scrollUpStart=滚动；
}
//如果继续向上滚动，则
//scrollUpStart和scroll最终将达到100px
如果（滚动启动-滚动>100）{
$（“.nav”）.addClass（“darkHeader”）；
}
}否则{
//我们正在向下滚动
//重置滚动启动
scrollUpStart=0；
$（“.nav”）.removeClass（“darkHeader”）；
}
lastScroll=滚动；
});
给你。顺便说一句，media.com做得很好。他们甚至写了一篇关于他们是如何做到这一点的帖子。如果您真的想完善您的解决方案，您可能需要查看它：


var lastcroll=0；
var scrollUpStart=0；
$（窗口）.on（'scroll'，function（）{
var scroll=$（窗口）.scrollTop（）；
如果（滚动===0）{
//我们在顶端
$（“.nav”）.removeClass（“darkHeader”）；
}else if（最后滚动>滚动）{
//我们正在向上滚动
//我们检查是否已经开始向上滚动
如果（滚动启动<滚动）{
//如果我们刚刚开始向上滚动，我们将
//将scrollUpStart设置为当前滚动值
scrollUpStart=滚动；
}
//如果继续向上滚动，则
//scrollUpStart和scroll最终将达到100px
如果（滚动启动-滚动>100）{
$（“.nav”）.addClass（“darkHeader”）；
}
}否则{
//我们正在向下滚动
//重置滚动启动
scrollUpStart=0；
$（“.nav”）.removeClass（“darkHeader”）；
}
lastScroll=滚动；
});
您能更详细地解释一下您想做什么吗？您希望导航栏在什么时候具有“darkHeader”类？你到底想什么时候把它藏起来？试着把描述分成几个部分：1）当滚动<100px时2）当滚动>100px时我真的不理解你的问题..你能简单介绍一下吗？@dangor-是的，当然，它是在1个鼠标滚动中显示/隐藏导航，试图在3个鼠标滚动或在100px位置显示/隐藏。你说的“1个鼠标滚动”到底是什么意思？尝试用像素表示值…我的意思是显示/隐藏导航是可以的，但我想在页面滚动位置100像素后显示/隐藏。你能更详细地解释一下你想做什么吗？您希望导航栏在什么时候具有“darkHeader”类？你到底想什么时候把它藏起来？试着把描述分成几个部分：1）当滚动<100px时2）当滚动>100px时我真的不理解你的问题..你能简单介绍一下吗？@dangor-是的，当然，它是在1个鼠标滚动中显示/隐藏导航，试图在3个鼠标滚动或在100px位置显示/隐藏。你说的“1个鼠标滚动”到底是什么意思？尝试用像素表示值…我的意思是显示/隐藏导航是可以的，但我想在页面滚动位置的100px后显示/隐藏。我不认为这只是隐藏/显示滚动的问题，而是添加/删除“darkHeader”class@Sofiene杰巴利-你好，谢谢，但不是这样。我是说我以前的显示/隐藏导航还可以，但我想在100px后显示/隐藏页面滚动位置，而不是在0px上。@SofieneDJEBALI-谢谢，详细信息是：我以前的隐藏和显示不应该改变，当你向上滚动页面时，它只是显示导航菜单，而且发生的方式是正确的。但我要显示100px后向上滚动页面，意思是显示方式不对，要显示100px后向上滚动页面。对不起，我的英语不好。我不认为这只是隐藏/显示卷轴的问题，而是添加/删除“darkHeader”class@S
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;
});