So, i have been at this for a few hours, searching for jsfiddle examples i can modify to fit my needs...

if a div scrolls out of view or into view, i want to trigger a example event like ( hide,fade, alert or anything)

​

if the div is above the screen?

​if the div is below the screen?

​if the div is center of the screen?

the example bellow is missing the "if the div is above the screen?"

​this was my attempt, but i fail... its as close i could get...

1. else if (objectBottom < windowBottom-500) {//the div is above screen}

http://jsfiddle.net/b7qnrsrz/117/

here is my best attempt, it fails when the div is above the screen

1. .fade {
       margin: 50px;
       padding: 50px;
       background-color: lightgreen;
       opacity: 0;
   }

1. <div>
       <div class="fade">Fade In 01</div>
       <div class="fade">Fade In 02</div>
       <div class="fade">Fade In 03</div>
       <div class="fade">Fade In 04</div>
       <div class="fade">Fade In 05</div>
       <div class="fade">Fade In 06</div>
       <div class="fade">Fade In 07</div>
       <div class="fade">Fade In 08</div>
       <div class="fade">Fade In 09</div>
       <div class="fade">Fade In 10</div>
   </div>

1. $(window).on("load",function() {
       function fade() {
           $('.fade').each(function() {
               /* Check the location of each desired element */
               var objectBottom = $(this).offset().top + $(this).outerHeight();
               var windowBottom = $(window).scrollTop() + $(window).innerHeight();
               
               /* If the object is completely visible in the window, fade it in */
               if (objectBottom < windowBottom) { //object comes into view (scrolling down)
                   if ($(this).css('opacity')==0) {$(this).fadeTo(1,1);}
               }
               if (objectBottom > windowBottom) { //object goes bellow the screen (scrolling up)
                   if ($(this).css('opacity')==1) {$(this).fadeTo(1,0);}
               }else if (objectBottom < windowBottom-500) { //object goes above the screen (scrolling down)
                   if ($(this).css('opacity')==1) {$(this).fadeTo(1,0);}
               }
   
           });
       }
       fade(); //Fade in completely visible elements during page-load
       $(window).scroll(function() {fade();}); //Fade in elements during scroll
   });