JAVASCRIPT   62
jquery nav
Guest on 13th August 2022 12:40:17 AM


  1. /*
  2.  * jQuery One Page Nav Plugin
  3.  * http://github.com/davist11/jQuery-One-Page-Nav
  4.  *
  5.  * Copyright (c)  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.0
  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.                 },
  49.  
  50.                 init: function() {
  51.                         // Introduce defaults that can be extended either
  52.                         // globally or using an object literal.
  53.                         this.config = $.extend({}, this.defaults, this.options, this.metadata);
  54.  
  55.                         this.$nav = this.$elem.find(this.config.navItems);
  56.  
  57.                         //Filter any links out of the nav
  58.                         if(this.config.filter !== '') {
  59.                                 this.$nav = this.$nav.filter(this.config.filter);
  60.                         }
  61.  
  62.                         //Handle clicks on the nav
  63.                         this.$nav.on('click.onePageNav', $.proxy(this.handleClick, this));
  64.  
  65.                         //Get the section positions
  66.                         this.getPositions();
  67.  
  68.                         //Handle scroll changes
  69.                         this.bindInterval();
  70.  
  71.                         //Update the positions on resize too
  72.                         this.$win.on('resize.onePageNav', $.proxy(this.getPositions, this));
  73.  
  74.                         return this;
  75.                 },
  76.  
  77.                 adjustNav: function(self, $parent) {
  78.                         self.$elem.find('.' + self.config.currentClass).removeClass(self.config.currentClass);
  79.                         $parent.addClass(self.config.currentClass);
  80.                 },
  81.  
  82.                 bindInterval: function() {
  83.                         var self = this;
  84.                         var docHeight;
  85.  
  86.                         self.$win.on('scroll.onePageNav', function() {
  87.                                 self.didScroll = true;
  88.                         });
  89.  
  90.                         self.t = setInterval(function() {
  91.                                 docHeight = self.$doc.height();
  92.  
  93.                                 //If it was scrolled
  94.                                 if(self.didScroll) {
  95.                                         self.didScroll = false;
  96.                                         self.scrollChange();
  97.                                 }
  98.  
  99.                                 //If the document height changes
  100.                                 if(docHeight !== self.docHeight) {
  101.                                         self.docHeight = docHeight;
  102.                                         self.getPositions();
  103.                                 }
  104.                         }, 250);
  105.                 },
  106.  
  107.                 getHash: function($link) {
  108.  
  109.                         if($link.attr('href') != '#')
  110.                                 return $link.attr('href').split('#')[1];
  111.  
  112.                 },
  113.  
  114.                 getPositions: function() {
  115.                         var self = this;
  116.                         var linkHref;
  117.                         var topPos;
  118.                         var $target;
  119.  
  120.                         self.$nav.each(function() {
  121.                                 linkHref = self.getHash($(this));
  122.                                 $target = $('#' + linkHref);
  123.  
  124.                                 if($target.length) {
  125.                                         topPos = $target.offset().top;
  126.                                         self.sections[linkHref] = Math.round(topPos);
  127.                                 }
  128.                         });
  129.                 },
  130.  
  131.                 getSection: function(windowPos) {
  132.                         var returnValue = null;
  133.                         var windowHeight = Math.round(this.$win.height() * this.config.scrollThreshold);
  134.  
  135.                         for(var section in this.sections) {
  136.                                 if((this.sections[section] - windowHeight) < windowPos) {
  137.                                         returnValue = section;
  138.                                 }
  139.                         }
  140.  
  141.                         return returnValue;
  142.                 },
  143.  
  144.                 handleClick: function(e) {
  145.                         var self = this;
  146.                         var $link = $(e.currentTarget);
  147.                         var $parent = $link.parent();
  148.                         var newLoc = '#' + self.getHash($link);
  149.  
  150.                         if(newLoc == '#undefined' || newLoc == '#')
  151.                                 return;
  152.  
  153.                         if(!$parent.hasClass(self.config.currentClass)) {
  154.                                 //Start callback
  155.                                 if(self.config.begin) {
  156.                                         self.config.begin();
  157.                                 }
  158.  
  159.                                 //Change the highlighted nav item
  160.                                 self.adjustNav(self, $parent);
  161.  
  162.                                 //Removing the auto-adjust on scroll
  163.                                 self.unbindInterval();
  164.  
  165.                                 //Scroll to the correct position
  166.                                 self.scrollTo(newLoc, function() {
  167.                                         //Do we need to change the hash?
  168.                                         if(self.config.changeHash) {
  169.                                                 window.location.hash = newLoc;
  170.                                         }
  171.  
  172.                                         //Add the auto-adjust on scroll back in
  173.                                         self.bindInterval();
  174.  
  175.                                         //End callback
  176.                                         if(self.config.end) {
  177.                                                 self.config.end();
  178.                                         }
  179.                                 });
  180.                         }
  181.  
  182.  
  183.                         e.preventDefault();
  184.                 },
  185.  
  186.                 scrollChange: function() {
  187.                         var windowTop = this.$win.scrollTop();
  188.                         var position = this.getSection(windowTop);
  189.                         var $parent;
  190.  
  191.                         //If the position is set
  192.                         if(position !== null) {
  193.                                 $parent = this.$elem.find('a[href$="#' + position + '"]').parent();
  194.  
  195.                                 //If it's not already the current section
  196.                                 if(!$parent.hasClass(this.config.currentClass)) {
  197.                                         //Change the highlighted nav item
  198.                                         this.adjustNav(this, $parent);
  199.  
  200.                                         //If there is a scrollChange callback
  201.                                         if(this.config.scrollChange) {
  202.                                                 this.config.scrollChange($parent);
  203.                                         }
  204.                                 }
  205.                         }
  206.                 },
  207.  
  208.                 scrollTo: function(target, callback) {
  209.                         var offset = $(target).offset().top;
  210.  
  211.                         $('html, body').animate({
  212.                                 scrollTop: offset
  213.                         }, this.config.scrollSpeed, this.config.easing, callback);
  214.                 },
  215.  
  216.                 unbindInterval: function() {
  217.                         clearInterval(this.t);
  218.                         this.$win.unbind('scroll.onePageNav');
  219.                 }
  220.         };
  221.  
  222.         OnePageNav.defaults = OnePageNav.prototype.defaults;
  223.  
  224.         $.fn.onePageNav = function(options) {
  225.                 return this.each(function() {
  226.                         new OnePageNav(this, options).init();
  227.                 });
  228.         };
  229.  
  230. })( jQuery, window , document );
Raw Paste

Login or Register to edit or fork this paste. It's free.