Advertisement
deliciousthemes

jQuery Nav 3.0.1

Sep 18th, 2014
318
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /*
  2.  * jQuery One Page Nav Plugin
  3.  * http://github.com/davist11/jQuery-One-Page-Nav
  4.  *
  5.  * Copyright (c) 2010 Trevor Davis (http://trevordavis.net)
  6.  * Dual licensed under the MIT and GPL licenses.
  7.  * Uses the same license as jQuery, see:
  8.  * http://jquery.org/license
  9.  *
  10.  * @version 3.0.1
  11.  *
  12.  * Example usage:
  13.  * $('#nav').onePageNav({
  14.  *   currentClass: 'current',
  15.  *   changeHash: false,
  16.  *   scrollSpeed: 750
  17.  * });
  18.  */
  19.  
  20. ;(function($, window, document, undefined){
  21.  
  22.     // our plugin constructor
  23.     var OnePageNav = function(elem, options){
  24.         this.elem = elem;
  25.         this.$elem = $(elem);
  26.         this.options = options;
  27.         this.metadata = this.$elem.data('plugin-options');
  28.         this.$win = $(window);
  29.         this.sections = {};
  30.         this.didScroll = false;
  31.         this.$doc = $(document);
  32.         this.docHeight = this.$doc.height();
  33.     };
  34.  
  35.     // the plugin prototype
  36.     OnePageNav.prototype = {
  37.         defaults: {
  38.             navItems: 'a',
  39.             currentClass: 'current',
  40.             changeHash: false,
  41.             easing: 'swing',
  42.             filter: '',
  43.             scrollSpeed: 750,
  44.             scrollThreshold: 0.5,
  45.             begin: false,
  46.             end: false,
  47.             scrollChange: false,
  48.             scrollOffset : 0
  49.         },
  50.  
  51.         init: function() {
  52.             // Introduce defaults that can be extended either
  53.             // globally or using an object literal.
  54.             this.config = $.extend({}, this.defaults, this.options, this.metadata);
  55.  
  56.             this.$nav = this.$elem.find(this.config.navItems);
  57.  
  58.             //Filter any links out of the nav
  59.             if(this.config.filter !== '') {
  60.                 this.$nav = this.$nav.filter(this.config.filter);
  61.             }
  62.  
  63.             //Handle clicks on the nav
  64.             this.$nav.on('click.onePageNav', $.proxy(this.handleClick, this));
  65.  
  66.             //Get the section positions
  67.             this.getPositions();
  68.  
  69.             //Handle scroll changes
  70.             this.bindInterval();
  71.  
  72.             //Update the positions on resize too
  73.             this.$win.on('resize.onePageNav', $.proxy(this.getPositions, this));
  74.  
  75.             return this;
  76.         },
  77.  
  78.         adjustNav: function(self, $parent) {
  79.             self.$elem.find('.' + self.config.currentClass).removeClass(self.config.currentClass);
  80.             $parent.addClass(self.config.currentClass);
  81.         },
  82.  
  83.         bindInterval: function() {
  84.             var self = this;
  85.             var docHeight;
  86.  
  87.             self.$win.on('scroll.onePageNav', function() {
  88.                 self.didScroll = true;
  89.             });
  90.  
  91.             self.t = setInterval(function() {
  92.                 docHeight = self.$doc.height();
  93.  
  94.                 //If it was scrolled
  95.                 if(self.didScroll) {
  96.                     self.didScroll = false;
  97.                     self.scrollChange();
  98.                 }
  99.  
  100.                 //If the document height changes
  101.                 if(docHeight !== self.docHeight) {
  102.                     self.docHeight = docHeight;
  103.                     self.getPositions();
  104.                 }
  105.             }, 250);
  106.         },
  107.  
  108.         getHash: function($link) {
  109.             return $link.attr('href').split('#')[1];
  110.         },
  111.  
  112.         getPositions: function() {
  113.             var self = this;
  114.             var linkHref;
  115.             var topPos;
  116.             var $target;
  117.  
  118.             self.$nav.each(function() {
  119.                 linkHref = self.getHash($(this));
  120.                 $target = $('#' + linkHref);
  121.  
  122.                 if($target.length) {
  123.                     topPos = $target.offset().top;
  124.                     self.sections[linkHref] = Math.round(topPos);
  125.                 }
  126.             });
  127.         },
  128.  
  129.         getSection: function(windowPos) {
  130.             var returnValue = null;
  131.             var windowHeight = Math.round(this.$win.height() * this.config.scrollThreshold);
  132.  
  133.             for(var section in this.sections) {
  134.                 if((this.sections[section] - windowHeight) < windowPos) {
  135.                     returnValue = section;
  136.                 }
  137.             }
  138.  
  139.             return returnValue;
  140.         },
  141.  
  142.         handleClick: function(e) {
  143.             var self = this;
  144.             var $link = $(e.currentTarget);
  145.             var $parent = $link.parent();
  146.             var newLoc = '#' + self.getHash($link);
  147.  
  148.             if(!$parent.hasClass(self.config.currentClass)) {
  149.                 //Start callback
  150.                 if(self.config.begin) {
  151.                     self.config.begin();
  152.                 }
  153.  
  154.                 //Change the highlighted nav item
  155.                 self.adjustNav(self, $parent);
  156.  
  157.                 //Removing the auto-adjust on scroll
  158.                 self.unbindInterval();
  159.  
  160.                 //Scroll to the correct position
  161.                 self.scrollTo(newLoc, function() {
  162.                     //Do we need to change the hash?
  163.                     if(self.config.changeHash) {
  164.                         window.location.hash = newLoc;
  165.                     }
  166.  
  167.                     //Add the auto-adjust on scroll back in
  168.                     self.bindInterval();
  169.  
  170.                     //End callback
  171.                     if(self.config.end) {
  172.                         self.config.end();
  173.                     }
  174.                 });
  175.             }
  176.  
  177.             e.preventDefault();
  178.         },
  179.  
  180.         scrollChange: function() {
  181.             var windowTop = this.$win.scrollTop();
  182.             var position = this.getSection(windowTop);
  183.             var $parent;
  184.  
  185.             //If the position is set
  186.             if(position !== null) {
  187.                 $parent = this.$elem.find('a[href$="#' + position + '"]').parent();
  188.  
  189.                 //If it's not already the current section
  190.                 if(!$parent.hasClass(this.config.currentClass)) {
  191.                     //Change the highlighted nav item
  192.                     this.adjustNav(this, $parent);
  193.  
  194.                     //If there is a scrollChange callback
  195.                     if(this.config.scrollChange) {
  196.                         this.config.scrollChange($parent);
  197.                     }
  198.                 }
  199.             }
  200.         },
  201.  
  202.         scrollTo: function(target, callback) {
  203.             var offset = $(target).offset().top - this.config.scrollOffset;
  204.  
  205.             $('html, body').animate({
  206.                 scrollTop: offset
  207.             }, this.config.scrollSpeed, this.config.easing, callback);
  208.         },
  209.  
  210.         unbindInterval: function() {
  211.             clearInterval(this.t);
  212.             this.$win.unbind('scroll.onePageNav');
  213.         }
  214.     };
  215.  
  216.     OnePageNav.defaults = OnePageNav.prototype.defaults;
  217.  
  218.     $.fn.onePageNav = function(options) {
  219.         return this.each(function() {
  220.             new OnePageNav(this, options).init();
  221.         });
  222.     };
  223.  
  224. })( jQuery, window , document );
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement