Animated - Waypoints - Up - Down

by bizamajig

HTML

<script src="//cdn.jsdelivr.net/jquery.waypoints/2.0.2/waypoints.min.js"></script>
<div class="thing">111</div>
<div class="spacer">222</div>
<div class="thing">333</div>
<div class="spacer">444</div>
<div class="thing">555</div>
<div class="spacer">666</div>
<div class="thing">777</div>
<div class="spacer">888</div>
<div class="thing">999</div>
<div class="spacer">10101010</div>

CSS

.thing {height:50px;background:#eaeaea;border:1px solid #ccc;}
.spacer {height:1000px;}

JavaScript

//waypoint documentation - http://imakewebthings.com/jquery-waypoints/#doc-waypoint
//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
	}
//position here matters if function down comes first, we get the down alert or callback first
$( '.thing' ).waypoint( function( up ) { // if we're moving up!
	$( '.thing' ).addClass( 'top' );
	$( '.top' ).fadeOut( 'fast' ); //alert("thing in viewport is 50px. from top");
}, { offset: 50 });
//overrides default waypoint to detect when item is at top of viewport
$( '.thing' ).waypoint( function( down ) { // if we're moving down!
	$( '.thing' ).addClass( 'top' );
	$( '.top' ).fadeIn( 'fast' ); //alert("thing in viewport is 51px. from top");
}, { offset: 51 });
//overrides default waypoint to detect when item is at top of viewport
//this 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");
});
$('.thing').waypoint(function(up) { // if we're moving up!
	$( '.thing' ).addClass( 'bottom' );
	$( '.bottom' ).fadeOut( 'fast' ); // alert("thing in viewport has reached bottom");
}, { offset: function() {
		return -$(this).height() / 2;
}});