Hide an image when scroll near bottom

$(document).ready(function () { 
    $("#scrolldown").show('slow'); 
 
    $(window).scroll(function (e) { 
        e.preventDefault(); 
        //console.log($(document).height()+'-'+$(window).scrollTop()); 
        if ($(document).height()-$(window).scrollTop() < 500) { 
            $("#scrolldown").hide('slow'); 
        } 
        else { 
            $("#scrolldown").show('slow'); 
        } 
    }); 
});

#pagewrap{ 
  height:1000px; 
} 
#scrolldown { 
    position: fixed; 
    color: white; 
    padding: 10px 30px; 
    background: red; 
    bottom: 30px; 
    right: 30px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="pagewrap"> 
	<h1>Demo</h1> 
	<h2><a href="http://webdesignerwall.com/tutorials/animated-scroll-to-top">test</a></h2> 
<div id="scrolldown"> 
  i ll hide @ bottom 
</div> 
 
</div>