How To Make My Text Appearing While Scrolling Website

How can I make my text appear when scrolling? I've found this http://www.jqueryrain.com/?HZtLD8hN but I'd like to know how it works. There was a similar question asked but I don't

Solution 1:

A basic example is this: say some of your content is in a<div id="appearble_text"> that is at 70% of the total height of the page. <div id="container">

Initially you will set document.getElementById("appearable_text").style.display = "none";

You can set up a function

functionOnScroll() {

            var totalHeight = this.offsetHeight; //(this, because container is the caller of the function from the code below)if (this.scrollTop || this.scrollTop > totalHeight * 0.7) { //if scrolling reached 70% of heightdocument.getElementById("appearable_text").style.display = "block"; 
            }
        }

and then use it

var container = document.getElementById("container");
container.onscroll = OnScroll;

Of course, instead of just suddenly displaying the <div> you can fade it in or do all sorts of CSS/JQuery tricks you like.