Question

我需要以下帮助，我有一个菜单，我希望在页面向下滚动时保持固定。页面的第一部分是白色，然后在800px之后所有其余部分是黑色背景。我希望能够在用户滚动到黑色部分时将菜单的颜色更改为白色。我知道如何通过添加和删除jQuery中的类来更改它，但我在编写代码时遇到问题如何检测滚动页面的数量。我相信它应该是一些简单的if语句计算顶部偏移，但我真的无法自己解决它。

谢谢，米尔科

Answer 1

$(document).scroll(function(){
    if($(document).scrollTop() >= max) {
        // do something
    }
})

Answer 2

$(window).scrollTop()会为您提供用户滚动的像素数量。

如果你想要更精细的帮助，你应该发布一些示例代码。

Answer 3

你可以比较

$("#menu").offset().top

到

$("#blackDiv").offset().top

如果前者大于后者，则更改菜单颜色，如果不是，则将其更改回来。

这将处理对页面布局的未来更改（即，如果页面的黑色部分从顶部停止正好是800px）。

Answer 4

根据@bricriu的建议，这是使用offset().top的{{3}}。

HTML：

<div id="menu"> MENU </div>
<div class="darkBackground">
</div>
<div class="lightBackground">
</div>

CSS：

.darkBackground{height:400px; background-color:black;}
.lightBackground{height:400px; background-color:yellow;}
#menu{height:30px; width:100%; position:fixed; background-color:red; top:150px; color:white;}
#menu.darkMenu{background-color:green;}

使用Javascript：

$(window).scroll(function () { 
    console.log("menu: "+$("#menu").offset().top+" background: "+$(".lightBackground").offset().top);
    if($("#menu").offset().top > $(".lightBackground").offset().top){
        $("#menu").addClass("darkMenu");
    }else{
        $("#menu").removeClass("darkMenu");      
    }
});

在此示例中，菜单从绿色切换为红色，背景从黑色变为黄色。

在jQuery中设置偏移量

4 个答案: