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

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

JS FIDDLE

$(document).ready(function () { var project1 = $('section:nth-child(1)').offset(); var project2 = $('section:nth-child(2)').offset(); var project3 = $('section:nth-child(3)').offset(); var project4 = $('section:nth-child(4)').offset(); var project5 = $('section:nth-child(5)').offset(); var project6 = $('section:nth-child(6)').offset(); var $window = $(window); $window.scroll(function () { if ($window.scrollTop() >= project1) { $("header").removeClass().addClass("project1"); } if ($window.scrollTop() >= project2) { $("header").removeClass().addClass("project2"); } if ($window.scrollTop() >= project3) { $("header").removeClass().addClass("project3"); } if ($window.scrollTop() >= project4) { $("header").removeClass().addClass("project4"); } if ($window.scrollTop() >= project5) { $("header").removeClass().addClass("project5"); } if ($window.scrollTop() >= project6) { $("header").removeClass().addClass("project6"); } }); }); 

Answer 1

方法.offset()返回一个包含top和left属性的对象：

 {top: 1808, left: 8} 

因此，您需要访问条件语句中的top属性。

更改

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

至：

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

更新的示例

---

作为旁注， $('section:nth-child(1)').offset()将是未定义的，因为section元素不是第一个元素（

是）。 使用:nth-of-type而不是:nth-child 。 既然你正在使用jQuery， eq()也会起作用。

 $(document).ready(function() { 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(); var $window = $(window); $window.scroll(function() { if ( $window.scrollTop() >= project1.top) { $("header").removeClass().addClass("project1"); } if ( $window.scrollTop() >= project2.top ) { $("header").removeClass().addClass("project2"); } if ( $window.scrollTop() >= project3.top ) { $("header").removeClass().addClass("project3"); } if ( $window.scrollTop() >= project4.top ) { $("header").removeClass().addClass("project4"); } if ( $window.scrollTop() >= project5.top ) { $("header").removeClass().addClass("project5"); } if ( $window.scrollTop() >= project6.top ) { $("header").removeClass().addClass("project6"); } }); }); 

 header { position: fixed; top: 0; left: 0; right: 0; height: 100px; background: #000; } header.project1 { background: red; } header.project2 { background: orange; } header.project3 { background: blue; } header.project4 { background: green; } header.project5 { background: red; } header.project6 { background: blue; } section { height: 900px; } 

  
 
Section 1
 
Section 2
 
Section 3
 
Section 4
 
Section 5
 
Section 6