元素到达视口顶部时添加类 [英] 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屋!