元素到达视口顶部时添加类 [英] Add class when element reaches top of viewport
问题描述
我试图在元素到达视口顶部时向头添加一个类，但我似乎无法找出为什么它不起作用。我没有错误，我已经检查，看到jquery获取偏移量，它是。任何帮助都会很棒。我还想知道如何将此代码扩展到任意数量的部分，而不是仅指定6。
$ $ $（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）;
}
}）;
}）;
.offset（） ，返回一个包含属性的对象。 和 left ：
{top： 1808，left：8}
因此，您需要访问顶部<
$ p
$ b
您的条件语句中的code>属性。 > if（$ window.scrollTop（）> = project1）{...}
if（$ window.scrollTop（）> = project1.top）{...}
code> 请注意， $（'section：因为section元素不是第一个元素（< header> >是）。使用：nth-of-type 而不是：nth-child 。由于您使用的是jQuery，所以 eq（） 也可以工作。
$（document）.ready（function（）{var project1 = $（'section： （）'）。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）{$ （ 头）removeClass（）addClass（ 项目2）。。 } 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;左：0;正确：0; height：100px;背景：＃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;}
< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< header>< / header>< section>< section>< section>< section> Section 2< / section>< section> Section 3< / section>< section> Section 4< / section>< section> Section 6< / section>
I am trying to add a class to the header when an element reaches the top of the viewport but I cannot seem to find out why it is not working. I have no errors and I have checked to see that jquery is fetching the offsets and it is. Any help would be great. I would also like to know how to extend this code to any number of section's rather than stating just 6.
$(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");
}
});
});
The method .offset(), returns an object containing the properties top and left:
{top: 1808, left: 8}
Therefore you need to access the top property in your conditional statements.
Change
if ($window.scrollTop() >= project1) { ... }
to:
if ($window.scrollTop() >= project1.top) { ... }
As a side note, $('section:nth-child(1)').offset() will be undefined because the section element isn't the first element (the <header> is). Use :nth-of-type rather than :nth-child. Since you're using jQuery, eq() would work too.
$(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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header></header>
<section>Section 1</section>
<section>Section 2</section>
<section>Section 3</section>
<section>Section 4</section>
<section>Section 5</section>
<section>Section 6</section>
这篇关于元素到达视口顶部时添加类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
