Javascript 当元素到达视口顶部时添加类

当一个元素到达视口顶部时，我试图将一个类添加到标题中，但我似乎无法找到它不起作用的原因。我没有任何错误，我已经检查过jquery是否正在获取偏移量，并且它是。任何帮助都会很好。我还想知道如何将此代码扩展到任意数量的节，而不是仅说明6个节

方法返回一个包含属性

top

和

left

的对象：

{top: 1808, left: 8}

因此，您需要访问条件语句中的

top

属性

改变

if ($window.scrollTop() >= project1) { ... }

致：

---

作为旁注，

$（'section:nth child（1）'）.offset（）将是未定义的，因为section元素不是第一个元素（
是）。使用类型的
：n而不是
：n子项
。因为您使用的是jQuery，所以也可以使用


$（文档）.ready（函数（）{
var project1=$（'section:nth of type（1）'）。offset（）；
var project2=$（'section:nth of type（2）'）。offset（）；
var project3=$（'section:nth of type（3）'）。offset（）；
var project4=$（'section:nth of type（4）'）。offset（）；
var project5=$（'section:nth of type（5）'）。offset（）；
var project6=$（'section:nth of type（6）'）。offset（）；
变量$window=$（window）；
$window.scroll（函数（）{
如果（$window.scrollTop（）>=project1.top）{
$（“标题”）.removeClass（）.addClass（“项目1”）；
}
如果（$window.scrollTop（）>=project2.top）{
$（“标题”）.removeClass（）.addClass（“项目2”）；
}
如果（$window.scrollTop（）>=project3.top）{
$（“标题”）.removeClass（）.addClass（“项目3”）；
}
如果（$window.scrollTop（）>=project4.top）{
$（“标题”）.removeClass（）.addClass（“项目4”）；
}
如果（$window.scrollTop（）>=project5.top）{
$（“标题”）.removeClass（）.addClass（“项目5”）；
}
如果（$window.scrollTop（）>=project6.top）{
$（“标题”）.removeClass（）.addClass（“项目6”）；
}
});			
});
标题{
位置：固定；
排名：0；
左：0；
右：0；
高度：100px；
背景：#000；
}
标题.项目1{
背景：红色；
}
标题1.2项目{
背景：橙色；
}
标题.项目3{
背景：蓝色；
}
标题.项目4{
背景：绿色；
}
标题.项目5{
背景：红色；
}
标题.项目6{
背景：蓝色；
}
部分{
高度：900px；
}

第一节
第二节
第三节
第四节
第五节
第6节回答得很好。通过使用eq（），我可以扩展代码以支持任意数量的节吗？@2ne这就是使用
.eq（）
-（索引以零为基础）时的情况。如果希望代码支持任意数量的节，请使用循环。
if ($window.scrollTop() >= project1) { ... }

if ($window.scrollTop() >= project1.top) { ... }