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

Question

I have a div that I want to fade in after the user scrolls 600px down the page. I have achieved this easily enough using the code below:

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

I want the same div to fade out about 600 pixels from the bottom of the page. I have seen a couple other people trying to do this, but can't figure out how to have it both fade in, and fade out.

It should be pretty easy for a regular Javascript programmer I'd think.

Can anyone help me out?

Answer 1

Try this code:

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

It should fadeOut a div if there is less than 600 px left to scroll bottom.