fade element

by lovromar

HTML

<div id="thing-to-hide">dasdsadaad asd as</div>

<p>
    I am a little new to JQuery and I am trying to make a div at the bottom of the page fade in when the page loads and then when a user starts to scroll the div needs to fade out and then reappear when scrolling back to the top.
</p>
<br><br><br><br><br><br><br><br><br><br>
    <p>
    I am a little new to JQuery and I am trying to make a div at the bottom of the page fade in when the page loads and then when a user starts to scroll the div needs to fade out and then reappear when scrolling back to the top.
</p>
    <p>
    I am a little new to JQuery and I am trying to make a div at the bottom of the page fade in when the page loads and then when a user starts to scroll the div needs to fade out and then reappear when scrolling back to the top.
</p>
    <p>
    I am a little new to JQuery and I am trying to make a div at the bottom of the page fade in when the page loads and then when a user starts to scroll the div needs to fade out and then reappear when scrolling back to the top.
        
        <br><br><br><br><br><br><br>
    <p>
    I am a little new to JQuery and I am trying to make a div at the bottom of the page fade in when the page loads and then when a user starts to scroll the div needs to fade out and then reappear when scrolling back to the top.
</p>
    <p>
    I am a little new to JQuery and I am trying to make a div at the bottom of the page fade in when the page loads and then when a user starts to scroll the div needs to fade out and then reappear when scrolling back to the top.
</p>
    <p>
    I am a little new to JQuery and I am trying to make a div at the bottom of the page fade in when the page loads and then when a user starts to scroll the div needs to fade out and then reappear when scrolling back to the top.
</p>
            <br><br><br><br><br><br><br>
    <p>
    I am a little new to JQuery and I am trying to make a div at the bottom of the page fade in when the page loads and...

CSS

#thing-to-hide {
    
    width:100%;
    height:100px;
    position:fixed;
    background-color:red;
}

JavaScript

$(window).scroll(function(){
var threshold = 200; // number of pixels before bottom of page that you want to start fading
var op = (($(document).height() - $(window).height()) - $(window).scrollTop()) / threshold;
if( op <= 0 ){
$("#thing-to-hide").hide();
} else {
$("#thing-to-hide").show();
}
$("#thing-to-hide").css("opacity", op );
});