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()。

如何检测`article`的滚动位置并添加一个类

1 个答案: