jquery - 我应该为 jquery 中的反向 $(window).scroll 函数编写什么代码以向上滚动？

Question

我找到了窗口滚动功能的代码并将其附加到我的代码中，当我向下滚动时它工作得很好，即我有一个图像在向下滚动时逐渐消失，但是当我再次向上滚动时，图像是由于之前的影响而缺席。

所以请帮我解决这个问题。

HTML 部分:-

<div id="blog">
<img src="trans_blog.png">//i want this image to fade in and out.
</div>

jQuery 部分:-

$(document).ready(function(){
    $("#blog img").fadeIn(2000);
    $(window).scroll(function(){
    $("#blog img").fadeOut("slow");
    });
});

Answer 1

这段代码应该可以解决问题。它会在元素离开 View 时淡出，在返回时淡入

$(window).scroll( function(){
    $('#blog img').each( function(i){
        var top_of_window = $(window).scrollTop();
        var this_bottom = $(this).position().top + $(this).height();
        if(top_of_window > this_bottom){
            $(this).fadeOut();
            } else {
                $(this).fadeIn();
                }

    });