jQuery滚动和更改类答案

【问题标题】：jQuery scrolling and changing the classjQuery滚动和更改类
【发布时间】：2015-09-01 09:22:19
【问题描述】：

我正在尝试向我的网站添加以下功能：当用户向下滚动页面超过 400 像素时，页面的第一部分应为 opacity:0.4。这是我已经尝试失败的代码：

if($("html, body").offset().top >= 400){$("#main").addClass("scrolled");}

.scrolled {opacity:0.4;}

jquery 函数可以工作，所以我猜没有语法错误。

感谢您的任何回答。

【问题讨论】：

在Developer Tool 中调试您的代码，在if 条件中添加console.log("test1"); 以检查其是否进入if 条件。

标签： javascript jquery css scroll

【解决方案1】：

你想给$.scroll一个回调，每次滚动位置改变时都会调用它，然后检查你是否足够远。

$(document).scroll(function(){
    // check the document scroll position
    if($(document).scrollTop() >= 400){
         $("#main").addClass("scrolled");
    } else {
         // if you also want to put #main back to normal
         $("#main").removeClass("scrolled");
    }
});

Here is a jsfiddle.

【讨论】：

非常感谢，但它不起作用。我放了视频，你可以看看。 youtu.be/OdFhJ4sKa4w
@Hugo 我想我需要更多的上下文。问题可能出在其他地方。我在答案的末尾附加了一个 jsfiddle，以便您可以看到它的工作原理。
是的，我很抱歉，现在它可以工作了，我不明白，对不起我给你做的问题，我才 14 岁，我不是超级程序员 :) 我只是改变了一些想法突然它起作用了。谢谢你:)
很高兴你得到它。别担心，因为看似微小的细节而被卡住是很常见的。继续编码！

【解决方案2】：

我猜你正在寻找 .scrollTop() 而不是 .offset().top 导致负数，因为 html,body 已经有 .offset().top 到 0 @ 页面加载，并且当你滚动到 y 轴结果负数：

if($(document).scrollTop() >= 400){
     $("#main").addClass("scrolled");
}

如果您想使用.scrollTop()，请使用$(document) 作为选择器，我想您已经在那里拥有.scroll 事件。

注意：

$("html, body").offset().top 这个选择器导致.offset().top 的结果为负，因为html,body 在触发DOMContentLoaded 事件时已经有.offset().top 到0 的x/y 轴。所以当你垂直滚动时实际上是滚动到负数的 y 轴。

【讨论】：