Team:UCLA/javascript/cbpFixedScrollLayout.js

From 2013.igem.org

/**

* cbpFixedScrollLayout.js v1.0.0
* http://www.codrops.com
*
* Licensed under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 
* Copyright 2013, Codrops
* http://www.codrops.com
*/

var cbpFixedScrollLayout = (function() {

// cache and initialize some values var config = { // the cbp-fbscroller's sections $sections : $( '#cbp-fbscroller > section' ), // the navigation links $navlinks : $( '#cbp-fbscroller > nav:first > a' ), // index of current link / section currentLink : 0, // the body element $body : $( 'html, body' ), // the body animation speed animspeed : 650, // the body animation easing (jquery easing) animeasing : 'easeInOutExpo' };

function init() {

// click on a navigation link: the body is scrolled to the position of the respective section config.$navlinks.on( 'click', function() { scrollAnim( config.$sections.eq( $( this ).index() ).offset().top ); return false; } );

// 2 waypoints defined: // First one when we scroll down: the current navigation link gets updated. A "new section" is reached when it occupies more than 70% of the viewport // Second one when we scroll up: the current navigation link gets updated. A "new section" is reached when it occupies more than 70% of the viewport config.$sections.waypoint( function( direction ) { if( direction === 'down' ) { changeNav( $( this ) ); } }, { offset: '30%' } ).waypoint( function( direction ) { if( direction === 'up' ) { changeNav( $( this ) ); } }, { offset: '-30%' } );

// on window resize: the body is scrolled to the position of the current section $( window ).on( 'debouncedresize', function() { scrollAnim( config.$sections.eq( config.currentLink ).offset().top ); } );

}

// update the current navigation link function changeNav( $section ) { config.$navlinks.eq( config.currentLink ).removeClass( 'cbp-fbcurrent' ); config.currentLink = $section.index( 'section' ); config.$navlinks.eq( config.currentLink ).addClass( 'cbp-fbcurrent' ); }

// function to scroll / animate the body function scrollAnim( top ) { config.$body.stop().animate( { scrollTop : top }, config.animspeed, config.animeasing ); }

return { init : init };

})();