Wondering if you could have a look at the below code.
Im wanting a function to be called once the top of the red box hits the top of the viewport on scroll.
JS Fiddle: http://jsfiddle.net/ay5ttmLk/
HTML
<div class="test" style="height:100px;width:70px;">
sadfsadf
saf
sadf
saf
s
af
saf
saf
sadf
sadfsafsafsaf
</div>
<div class="test" style="height:100px;width:70px;">
sadfsadf
saf
sadf
saf
s
af
saf
saf
sadf
sadfsafsafsaf
sadfsaf
sadfsafsadf
</div>
CSS
.test {margin-top: 500px;
margin-bottom: 1000px;
background-color: red;}
JS
var el = $('.test');
el.on('scroll', function(){
if(el.scrollTop() == 0){alert("hit the top")}
});
See Question&Answers more detail:os