Example 2: Making fixed blurb modules appear and disappear on scroll

fixed-blurb-modules.js

<script>
// Run after document has loaded...
jQuery(document).ready(function($){
  // Do something on waypoint...
  $('#module-one').waypoint(function(){ //Once we have scrolled to the first module, we execute our function
    $('#one').fadeIn(); // Fade in the first blurb
		$('#two').fadeOut(); // Fade out the second blurb in case the user is scrolling up
  }, {offset: '25%'}); // This checks to see if #module-one element is at least 25% scrolled into view
  $('#module-two').waypoint(function(){ //Once we have scrolled to the second module, we execute our function
    $('#two').fadeIn(); // Fade in the second blurb
	  $('#three').fadeOut(); // Fade out the third blurb in case the user is scrolling up
  }, {offset: '25%'}); // This checks to see if #module-two element is at least 25% scrolled into view
  $('#module-three').waypoint(function(){ //Once we have scrolled to the third module, we execute our function
    $('#three').fadeIn(); // Fade in the third blurb 
  }, {offset: '25%'}); // This checks to see if #module-three element is at least 25% scrolled into view
  $('#start-top').waypoint(function(){
    $('#one').fadeOut(); 	// Fade out the first module as soon as they get to the top of the page
  }, {offset: '1%'}); // This checks to see if top of the page is at least 1% scrolled into view
});
</script>