Question

我的页面上有很多部分，所有部分都是全高和全宽。每个部分都包含一个图像。

因此，当访问者向上滚动或向下滚动到当前部分时，该部分上的图像将显示出来。如果用户跳过另一部分，则上一部分中的该图像将隐藏。

让我们说这些是我的代码。当用户在活动部分时，它应该将“活动”类添加到“文章”标签。当用户离开该部分时，应删除“active”类，并将“active”类添加到用户的当前部分。

.section .image {
   opacity: 0;
}

.section .active .image {
    opacity: 1;
}

    <section class="all-sections-wrap">

    <article class="section">

    <div class="image">
    <img src="blabla.png">
    </div>

    </article>

    <article class="section">

    <div class="image">
    <img src="blabla.png">
    </div>

    </article>

    <article class="section">

    <div class="image">
    <img src="blabla.png">
    </div>

    </article>

    <section>

我在stackoverflow中调查了很多话题，但不幸的是我找不到足够好的脚本。这里有很多关于检测偏移量和页面高度的问题。

如果能得到任何帮助，我将不胜感激。

感谢。

Answer 1

使用window元素上的.scroll() callback来了解滚动页面的时间。然后，您可以使用$(window).scrollTop()来确定页面滚动的像素数。最后，将它与要添加类的元素的偏移量与$("#element").offset().top

进行比较

$(window).scroll(function(){
    if($(window).scrollTop() >= $("#element").offset().top + $("#element").height() || $(window).scrollTop() < $("#element").offset().top)
        $('#element').removeClass('active');
    else
        $('#element').addClass('active');
});

如果您有多个部分，为避免复制上述代码，请使用each()。但是要小心，每次调用scroll()时每个部分的测试可能会对性能产生很大的影响。

$(window).scroll(function(){

    $('.section').each(function() {
        if($(window).scrollTop() >= $(this).offset().top + $(this).height() || $(window).scrollTop() < $(this).offset().top)
            $(this).removeClass('active');
        else
            $(this).addClass('active');
    });

});

根据页面滚动添加/删除类

1 个答案: