A basic example of how to use waypoints.js

Waypoints-test

<style>
$orange:#e24d25;
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background-color: #e24d25;
    color: White;
    text-align: center;
    font-family:helvetica;
    h1{
    	font-size: 2em;
    	line-height: 1em;
    	height: 80px;
    	line-height:80px;
    	padding:0;
    	margin:0;
    	background-color: $orange;
    }
}
#shadow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    z-index: 999;
    -webkit-box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);
    display: none;
}
#content {
    margin:100px 80px 0;
    // padding:0 20px;
}
p {
    margin-bottom:20px;
}
#scroll-to-top{
	position: fixed;
	bottom:20px;
	right:20px;
	background-color: #ccc;
	display:none;
	-webkit-border-radius: 10px 10px 10px 10px;
	   -moz-border-radius: 10px 10px 10px 10px;
            border-radius: 10px 10px 10px 10px;
	.genericon{
		display:block;
		width:50px;
		height:50px;
		line-height:50px;
		color:$orange;
		font-size:2em;
		text-align:center;
	}
}
</style>

<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/waypoints.min.js"></script>
<script>
	$(function(){
		$(window).scroll(function(){
			var y = $(window).scrollTop();
		  	if( y > 10 ){
		      	$("#shadow").fadeIn(function(){
		          	$('header').html('<h1>scrollTop > 10px</h1>');
		          	$('#scroll-to-top').fadeIn();
		      	});
		  	} else {
		      	$("#shadow").fadeOut(function(){
		           $('header').html('<h1>Fixed Header</h1>');
		           $('#scroll-to-top').fadeOut();
		      	});
		  	}
		  	if( y > 300 ){
		      	$("#shadow").fadeIn(function(){
		          	$('header').html('<h1>scrollTop > 300px</h1>');
		      	});
		  	}
		});

		$('#scroll-to-top').click(function(){
			var body = $("html, body");
			body.animate({scrollTop:0}, '500', 'swing', function() { 
			});
		});

		$('.p-6').waypoint(function() {
		  // alert('90% from the top');
		  $( this ).css( "background-color", "red" );
		}, { offset: '90%' });

	});
</script>