Have an image fade out when I have reached the bottom of the page, then reappear if otherwise

Question

I currently have a div with an image inside that fades in when the user has scrolled 300px down, and when they scroll back to the top, the div fades away. This div is essentially a "Back To Top" anchor.

What I would like to add to this is, when the user is 650px away from the bottom of the page, to have the image fade away, and then fade in when the user is greater than 650px away.

JavaScript

$(function(){
$(".top").hide();

$(window).scroll(function(){
if($(this).scrollTop()>300){
  $(".top").fadeIn(500)
}else{
  $(".top").fadeOut(100)
}
})
});

HTML

<div class="top">
  <a href="#top"><img src="img/toTop.png" width="50"></a>
</div>

Once again, I need to add on to my current JS. Thanks!

Answer 1

One way to do this would be to take note of the size of the height of document minus the height of the window (as when you scroll it calculates the scrollTop from the top of the scroll window).

First calculate the distance from bottom scrollTop should be minus your extra distance (650)

var fromBot = $(document).height()-650-$(window).height();

Modify your event like so

 $(window).scroll(function(){
        if($(document).scrollTop() > 300 && $(document).scrollTop() < fromBot) {
          $(".top").fadeIn(500);
        }else {
          $(".top").fadeOut(100);
        }
    });

Example fiddle