show on scroll past

http://stackoverflow.com/a/11958199/922168

HTML

<div id="div_to_scroll_past">Scroll Past Me</div>

CSS

#div_to_scroll_past {
    position: absolute;
    top: 1000px;
    height: 300px;
    background-color: red;
}
body {
    height:2000px;
}

JavaScript

$(document).ready( function() {
    $("#div_to_show").hide(); //hide your div initially
    $(window).scroll(function() {
        // once top of div is scrolled past
        if($('body').scrollTop() >= $("#div_to_scroll_past").offset().top) {
            console.log('past top');
            $("#div_to_show").show(); //reached the desired point -- show div
        }
    });
});

$(document).ready( function() {
    $("#div_to_show").hide(); //hide your div initially
    $(window).scroll(function() {
        // once bottom of div is scrolled past
        if($('body').scrollTop() >= ( $("#div_to_scroll_past").offset().top + $("#div_to_scroll_past").outerHeight() )) {
            console.log('past bottom');
            $("#div_to_show").show(); //reached the desired point -- show div
        }
    });
});