jquery - jQuery - 页面滚动时元素淡入/淡出

Question

我正在尝试制作一个页面，当您向下滚动时，图像会淡出。然后，当您向下滚动一点时，新图像会在进入页面时淡入。

我对jQuery知之甚少，所以我在这个网站上搜索了这个问题的解决方案。找了一段代码加到网站上，但是对网站的影响为零。这是因为正在使用图像。

这是代码：

var subsectionTop = $('.sub-section').offset().top;

$(window).scroll(function () {
if ((subsectionTop - $(window).scrollTop()) < 20) {
    $('.sub-section').stop().fadeTo(100, 0);
} else {
    $('.sub-section').stop().fadeTo('slow', 1);
}
});

我非常卡住，希望你们能提供任何帮助。谢谢 ：）

PS这里是我所有代码的jsfiddle

Answer 1

对您的代码进行了一些更改，并将 jquery 添加到您的小提琴中

<script>
$( document ).ready(function() {
         var subsectionTop = $('.sub-section').offset().top;

        $(window).scroll(function () {
            var y = $(window).scrollTop();
            if (subsectionTop < y) {
                $('.sub-section').fadeTo(100, 0);
            } else {
                $('.sub-section').fadeTo('slow', 1);
            }
        });
    });
</script>