javascript - 如何检测 `article`的滚动位置并添加类

Question

我有四篇不同的文章，内容各不相同。我所要做的就是当滚动位置到达需要添加的文章的顶部位置时，类处于事件状态。我试过没有成功。这是我到目前为止尝试过的代码。

HTML

<article></article>
<article></article>
<article></article>
<article></article>

CSS

article{
    height: 800px;
    background-color: gray;
}
article:nth-child(2){
    background-color: blue;
}
article:nth-child(3){
    background-color: pink;
}
article:last-child{
    background-color: orange;
}
article.active{
    background-color: red;
}

JQuery

var scrollPosition = $('article').scrollTop();
$(window).scroll(function () {
    if ($(window).scrollTop() == scrollPosition) {
        $(this).addClass('active');
    } else {
        $(this).removeClass('active');
    }
})

Working Demo

Answer 1

我推荐使用 .offset()获取元素的绝对位置。

这是一个例子:

$(window).scroll(function () {
    $('article').each(function () {
        var ArtOffsetTop = $(this).offset().top;
        var ArtOffsetBottom = $(this).offset().top + $(this).height();
        if (($(window).scrollTop() >= ArtOffsetTop) && ($(window).scrollTop() <= ArtOffsetBottom)) {
            $(this).addClass('active');
        } else {
            $(this).removeClass('active');
        }
    })
})

Live demo

---

我添加了一个新变量 ArtOffsetBottom 来检测 $(window).scrollTop() 是否在文章的顶部和底部之间。