//detect when thing is in 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;}
.red {background-color:#FF3300;}

JavaScript

//detect when thing is in viewport from scrolling up or down, 50px from top animate kinda sorta maybe i can add class like top and bottom and then top or bottom classed items fade in or out
$.fn.waypoint.defaults = {
  context: window,
  continuous: true,
  enabled: true,
  horizontal: false,
  offset: 'bottom-in-view' , //sets default waypoint
  triggerOnce: false
}

$('.thing').waypoint(function(down) { // if we're moving down!
  $('.thing').addClass("red");
  $('.top').fadeIn("fast");
  //alert("thing in viewport is 51px. from top");
}, { offset: 51 }); //overrides default waypoint to detect when item is at top of viewportthis must be at least 1px below the UP fadeOut waypoint

$('.thing').waypoint(function(down) { // if we're moving down!
  $('.thing').addClass("bottom");
  $('.bottom').fadeIn("fast");
  //alert("thing in viewport has reached bottom");
});