|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223 |
- /*
- * jQuery One Page Nav Plugin
- * http://github.com/davist11/jQuery-One-Page-Nav
- *
- * Copyright (c) 2010 Trevor Davis (http://trevordavis.net)
- * Dual licensed under the MIT and GPL licenses.
- * Uses the same license as jQuery, see:
- * http://jquery.org/license
- *
- * @version 3.0.0
- *
- * Example usage:
- * $('#nav').onePageNav({
- * currentClass: 'current',
- * changeHash: false,
- * scrollSpeed: 750
- * });
- */
-
- ;(function($, window, document, undefined){
-
- // our plugin constructor
- var OnePageNav = function(elem, options){
- this.elem = elem;
- this.$elem = $(elem);
- this.options = options;
- this.metadata = this.$elem.data('plugin-options');
- this.$win = $(window);
- this.sections = {};
- this.didScroll = false;
- this.$doc = $(document);
- this.docHeight = this.$doc.height();
- };
-
- // the plugin prototype
- OnePageNav.prototype = {
- defaults: {
- navItems: 'a',
- currentClass: 'current',
- changeHash: false,
- easing: 'swing',
- filter: '',
- scrollSpeed: 750,
- scrollThreshold: 0.5,
- begin: false,
- end: false,
- scrollChange: false
- },
-
- init: function() {
- // Introduce defaults that can be extended either
- // globally or using an object literal.
- this.config = $.extend({}, this.defaults, this.options, this.metadata);
-
- this.$nav = this.$elem.find(this.config.navItems);
-
- //Filter any links out of the nav
- if(this.config.filter !== '') {
- this.$nav = this.$nav.filter(this.config.filter);
- }
-
- //Handle clicks on the nav
- this.$nav.on('click.onePageNav', $.proxy(this.handleClick, this));
-
- //Get the section positions
- this.getPositions();
-
- //Handle scroll changes
- this.bindInterval();
-
- //Update the positions on resize too
- this.$win.on('resize.onePageNav', $.proxy(this.getPositions, this));
-
- return this;
- },
-
- adjustNav: function(self, $parent) {
- self.$elem.find('.' + self.config.currentClass).removeClass(self.config.currentClass);
- $parent.addClass(self.config.currentClass);
- },
-
- bindInterval: function() {
- var self = this;
- var docHeight;
-
- self.$win.on('scroll.onePageNav', function() {
- self.didScroll = true;
- });
-
- self.t = setInterval(function() {
- docHeight = self.$doc.height();
-
- //If it was scrolled
- if(self.didScroll) {
- self.didScroll = false;
- self.scrollChange();
- }
-
- //If the document height changes
- if(docHeight !== self.docHeight) {
- self.docHeight = docHeight;
- self.getPositions();
- }
- }, 250);
- },
-
- getHash: function($link) {
- return $link.attr('href').split('#')[1];
- },
-
- getPositions: function() {
- var self = this;
- var linkHref;
- var topPos;
- var $target;
-
- self.$nav.each(function() {
- linkHref = self.getHash($(this));
- $target = $('#' + linkHref);
-
- if($target.length) {
- topPos = $target.offset().top;
- self.sections[linkHref] = Math.round(topPos);
- }
- });
- },
-
- getSection: function(windowPos) {
- var returnValue = null;
- var windowHeight = Math.round(this.$win.height() * this.config.scrollThreshold);
-
- for(var section in this.sections) {
- if((this.sections[section] - windowHeight) < windowPos) {
- returnValue = section;
- }
- }
-
- return returnValue;
- },
-
- handleClick: function(e) {
- var self = this;
- var $link = $(e.currentTarget);
- var $parent = $link.parent();
- var newLoc = '#' + self.getHash($link);
-
- if(!$parent.hasClass(self.config.currentClass)) {
- //Start callback
- if(self.config.begin) {
- self.config.begin();
- }
-
- //Change the highlighted nav item
- self.adjustNav(self, $parent);
-
- //Removing the auto-adjust on scroll
- self.unbindInterval();
-
- //Scroll to the correct position
- self.scrollTo(newLoc, function() {
- //Do we need to change the hash?
- if(self.config.changeHash) {
- window.location.hash = newLoc;
- }
-
- //Add the auto-adjust on scroll back in
- self.bindInterval();
-
- //End callback
- if(self.config.end) {
- self.config.end();
- }
- });
- }
-
- e.preventDefault();
- },
-
- scrollChange: function() {
- var windowTop = this.$win.scrollTop();
- var position = this.getSection(windowTop);
- var $parent;
-
- //If the position is set
- if(position !== null) {
- $parent = this.$elem.find('a[href$="#' + position + '"]').parent();
-
- //If it's not already the current section
- if(!$parent.hasClass(this.config.currentClass)) {
- //Change the highlighted nav item
- this.adjustNav(this, $parent);
-
- //If there is a scrollChange callback
- if(this.config.scrollChange) {
- this.config.scrollChange($parent);
- }
- }
- }
- },
-
- scrollTo: function(target, callback) {
- var offset = $(target).offset().top;
-
- $('html, body').animate({
- scrollTop: offset
- }, this.config.scrollSpeed, this.config.easing, callback);
- },
-
- unbindInterval: function() {
- clearInterval(this.t);
- this.$win.unbind('scroll.onePageNav');
- }
- };
-
- OnePageNav.defaults = OnePageNav.prototype.defaults;
-
- $.fn.onePageNav = function(options) {
- return this.each(function() {
- new OnePageNav(this, options).init();
- });
- };
-
- })( jQuery, window , document );
|