在 jQuery 中设置偏移量

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

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

这可以处理未来对页面布局的更改（即，如果页面的黑色部分不再距顶部正好 800 像素）。

Answer 4

这是一个使用 offset().top 的 示例，如 @bricriu 所建议。

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

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