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

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

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

我希望同一个div从页面底部淡出约600像素。我见过其他一些人尝试这样做，但无法弄清楚如何使其淡入和淡出。

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

谁能帮我吗？

最佳答案

试试这个代码：

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

关于javascript - 向下滚动后如何淡入DIV，然后在底部逐渐淡出，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12573495/