在 jQuery 中设置偏移量答案

【问题标题】：Setting offset in jQuery在 jQuery 中设置偏移量
【发布时间】：2012-01-06 23:08:48
【问题描述】：

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

谢谢，米尔科

【问题讨论】：

标签： jquery scroll offset

【解决方案1】：

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

【讨论】：

谢谢，正是我需要的。

【解决方案2】：

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

如果您需要更详细的帮助，您真的应该发布一些示例代码。

【讨论】：

【解决方案3】：

你可以比较

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

到

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

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

这将处理您页面布局的未来更改（即，如果页面的黑色部分不再与顶部恰好相距 800 像素）。

【讨论】：

【解决方案4】：

这是@bricriu 建议的使用offset().top 的example。

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

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

【讨论】：