javascript - 如何在向下滚动后淡入 DIV，然后在底部淡出

Question

我有一个 div，我想在用户向下滚动 600px 页面后淡入。我已经使用下面的代码很容易地实现了这一点：

<script>
$(window).scroll(function(){
if($(window).scrollTop()>600){
$("#fade-in-area").fadeIn();
}else{
$("#fade-in-area").fadeOut();
}
});
</script>

我希望同一个 div 从页面底部淡出大约 600 像素。我见过其他几个人试图这样做，但不知道如何让它同时淡入和淡出。

对于我认为的普通 Javascript 程序员来说，这应该很容易。

谁能帮我吗？

Answer 1

试试这个代码：

<script>
   $(window).scroll(function(){
       var leftToBottom = $(document).height() - $(window).height() - $(window).scrollTop();
       var distanceFromTop = $(window).scrollTop();
       if( distanceFromTop > 600 && !$("#fade-in-area").is(":visible") 
          && leftToBottom > 600) {
            $("#fade-in-area").fadeIn();
       }else if($("#fade-in-area").is(":visible") && (distanceFromTop < 600 || leftToBottom < 600)){
            $("#fade-in-area").fadeOut();
      }
   });
</script>

如果滚动底部的距离小于 600 像素，它应该淡出一个 div。