Fading objects while scrolling
This is an example of how to fade an object based on the VERTICAL SCROLLING position of the page. Manually scroll the page to see the effect. Use the buttons on the top left to see how this is done.
Here's the HTML Code

<div id="fadeThisDiv">
<!--Put text or any kind of media in this div-->
</div>
Here's CSS Code

#fadeThisDiv {
position: relative;/*MUST have this at least*/
}
Here's the jQuery Code

You'll need these scripts in the <head> of your html page


<script type="text/javascript" src="https://www.freestyleacademy.rocks/jquery/minified.js"></script>

Here's the script that make the whole thing function properly


var scrolled, scrollFactor = 0.2;/*change scrollFactor as needed*/
$(window).bind("scroll",function(e){/*actions while scrolling*/
fadeWhileScrolling();
});
function fadeWhileScrolling(){
/*Create a number between 0 and 1 based on the scrolling position*/
scrolled = 1 - parseInt($(window).scrollTop()*scrollFactor)/100;
if(scrolled < 0) {/*ensures no negative numbers*/
scrolled = 0;
}
//console.info(scrolled);
$("#fadeThisDiv").css({
"opacity":scrolled
});
}