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。

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

1 个答案: