//detect when thing is is viewport from scrolling up or down
HTML
<script src="//cdn.jsdelivr.net/jquery.waypoints/2.0.2/waypoints.min.js"></script>
<div class="thing"></div>
<div class="spacer"></div>
<div class="thing"></div>
<div class="spacer"></div>
<div class="thing"></div>
<div class="spacer"></div>
<div class="thing"></div>
<div class="spacer"></div>
<div class="thing"></div>
<div class="spacer"></div>
CSS
.thing {height:50px;background:#eaeaea;border:1px solid #ccc;}
.spacer {height:1000px;}
JavaScript
//detect when thing is is viewport from scrolling up or down
$('.thing').waypoint(function(down) {
alert("thing in viewport down");
}, { offset: 'bottom-in-view' }); //sets alert when top of thing is at or enters bottom
$('.thing').waypoint(function(up) {
alert("thing in viewport up");
}, { offset: 'bottom-in-view' }); //sets alert when top of thing is at or enters bottom
$.fn.waypoint.defaults = {
context: window,
continuous: true,
enabled: true,
horizontal: true,
offset: 0, //sets default waypoint at top
triggerOnce: false
}
//waypoint documentation - http://imakewebthings.com/jquery-waypoints/#doc-waypoint