FadeIn on Scroll (jQuery)

Used to answer a question on StackOverflow.

by Phil Button

HTML

<div class="menutable">
    <div class="showme rowMenu">Fade In</div>
    <div class="hideme rowMenu">Fade In</div>
    <div class="hideme rowMenu">Fade In</div>
    <div class="hideme rowMenu">Fade In</div>
    <div class="hideme rowMenu">Fade In</div>
    <div class="hideme rowMenu">Fade In</div>
    <div class="hideme rowMenu">Fade In</div>
    <div class="hideme rowMenu">Fade In</div>
    <div class="hideme rowMenu">Fade In</div>
    <div class="hideme rowMenu">Fade In</div>
    <div class="hideme rowMenu">Fade In</div>
    <div class="hideme rowMenu">Fade In</div>
    <div class="hideme rowMenu">Fade In</div>
    <div class="hideme rowMenu">Fade In</div>
    <div class="hideme rowMenu">Fade In</div>
    <div class="hideme rowMenu">Fade In</div>
</div>

CSS

body {
    overflow-x: hidden;
    overflow-y: hidden;
}
.menutable
{
    height:2000px;
    overflow-x: hidden;
    overflow-y: scroll;
    
}

.rowMenu
{ 
    margin:50px; 
    padding:50px;
    width:50px;
    height:50px;
    background-color:lightgreen;
    -webkit-transition: all 1s ease; transition: all 1s ease;
}

.hideme
{
    opacity:0;
}

.showme {
  opacity:1!important;
}

JavaScript

$(document).ready(function() {
		//$('.hideme').addClass('showme');
    $('.menuTable').scroll( function(){
        $('.showme').each( function(i){
            var bottom_of_object = $(this).offset().top + $(this).outerHeight();
            var bottom_of_window = $('.menuTable').scrollTop() + $('.menutable').height();
            
            /*var top_of_object = $(this).offset().bottom - $(this).outerHeight();
            var top_of_window = $('.menuTable').height - $('.menuTable').scrollTop();*/
            
            if( bottom_of_window > bottom_of_object ){
                $(this).addClass('showme');
            }
            if( bottom_of_window < bottom_of_object ){
                $(this).removeClass('showme');
            }
            /*if( ($(this).offset().top - $('.menuTable').scrollTop()) < 0 ){
                $(this).removeClass('showme');
            }
            if( ($(this).offset().top - $('.menuTable').scrollTop()) > 0 ){
                $(this).addClass('showme');
            }*/
        });
    });
});