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

Add class when element reaches top of viewport

本文关键字：添加 顶部 视口 元素      更新时间：2023-09-26

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

JS 小提琴

$(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() 返回一个包含属性 top 和 left 的对象：

{top: 1808, left: 8}

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

改变

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

自：

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

更新的示例

作为旁注，$('section:nth-child(1)').offset()将未定义，因为 section 元素不是第一个元素（<header>是）。使用: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;
}
<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>

相关文章：