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

【问题标题】：How to Fade in a DIV After Scrolling Down, then Fade it Out at the Bottom如何在向下滚动后淡入 DIV，然后在底部淡出
【发布时间】：2012-09-24 21:57:00
【问题描述】：

我有一个 div，我想在用户向下滚动页面 600 像素后淡入。我使用下面的代码很容易做到这一点：

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

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

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

谁能帮帮我？

【问题讨论】：

标签： javascript scroll fadein fadeout

【解决方案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。

【讨论】：

这适用于几个例外。当您滚动到底部时，它会像应有的那样淡出，但是如果您在窗口的底部 600px 内并再次滚动，它会再次淡入和淡出，如果这有意义的话。如果您在页面底部 600 像素内，则无论何时向上或向下滚动，它都会淡入淡出。此外，如果您从顶部向下滚动 600 像素，它会淡入，但如果您向上滚动到顶部，它就不再淡出。有什么想法吗？
尝试更新代码。应该工作得更好。仍然不确定是否完全正确，因为我没有测试过。
就是这样！非常感谢！ :)