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

Question

我有一个 div，我想在用户向下滚动页面 600 像素后淡入。我已经使用下面的代码轻松地实现了这一点:

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