jquery.nav.js 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223
  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 2.2
  11. *
  12. * Example usage:
  13. * $('#nav').onePageNav({
  14. * currentClass: 'current',
  15. * changeHash: false,
  16. * scrollSpeed: 750
  17. * });
  18. */
  19. ;(function($, window, document, undefined){
  20. // our plugin constructor
  21. var OnePageNav = function(elem, options){
  22. this.elem = elem;
  23. this.$elem = $(elem);
  24. this.options = options;
  25. this.metadata = this.$elem.data('plugin-options');
  26. this.$nav = this.$elem.find('a');
  27. this.$win = $(window);
  28. this.sections = {};
  29. this.didScroll = false;
  30. this.$doc = $(document);
  31. this.docHeight = this.$doc.height();
  32. };
  33. // the plugin prototype
  34. OnePageNav.prototype = {
  35. defaults: {
  36. currentClass: 'current',
  37. changeHash: false,
  38. easing: 'swing',
  39. filter: '',
  40. scrollSpeed: 750,
  41. scrollOffset: 0,
  42. scrollThreshold: 0.5,
  43. begin: false,
  44. end: false,
  45. scrollChange: false
  46. },
  47. init: function() {
  48. var self = this;
  49. // Introduce defaults that can be extended either
  50. // globally or using an object literal.
  51. self.config = $.extend({}, self.defaults, self.options, self.metadata);
  52. //Filter any links out of the nav
  53. if(self.config.filter !== '') {
  54. self.$nav = self.$nav.filter(self.config.filter);
  55. }
  56. //Handle clicks on the nav
  57. self.$nav.on('click.onePageNav', $.proxy(self.handleClick, self));
  58. //Get the section positions
  59. self.getPositions();
  60. //Handle scroll changes
  61. self.bindInterval();
  62. //Update the positions on resize too
  63. self.$win.on('resize.onePageNav', $.proxy(self.getPositions, self));
  64. return this;
  65. },
  66. adjustNav: function(self, $parent) {
  67. self.$elem.find('.' + self.config.currentClass).removeClass(self.config.currentClass);
  68. $parent.addClass(self.config.currentClass);
  69. },
  70. bindInterval: function() {
  71. var self = this;
  72. var docHeight;
  73. self.$win.on('scroll.onePageNav', function() {
  74. self.didScroll = true;
  75. });
  76. self.t = setInterval(function() {
  77. docHeight = self.$doc.height();
  78. //If it was scrolled
  79. if(self.didScroll) {
  80. self.didScroll = false;
  81. self.scrollChange();
  82. }
  83. //If the document height changes
  84. if(docHeight !== self.docHeight) {
  85. self.docHeight = docHeight;
  86. self.getPositions();
  87. }
  88. }, 250);
  89. },
  90. getHash: function($link) {
  91. return $link.attr('href').split('#')[1];
  92. },
  93. getPositions: function() {
  94. var self = this;
  95. var linkHref;
  96. var topPos;
  97. var $target;
  98. self.$nav.each(function() {
  99. linkHref = self.getHash($(this));
  100. $target = $('#' + linkHref);
  101. if($target.length) {
  102. topPos = $target.offset().top;
  103. self.sections[linkHref] = Math.round(topPos) - self.config.scrollOffset;
  104. }
  105. });
  106. },
  107. getSection: function(windowPos) {
  108. var returnValue = null;
  109. var windowHeight = Math.round(this.$win.height() * this.config.scrollThreshold);
  110. for(var section in this.sections) {
  111. if((this.sections[section] - windowHeight) < windowPos) {
  112. returnValue = section;
  113. }
  114. }
  115. return returnValue;
  116. },
  117. handleClick: function(e) {
  118. var self = this;
  119. var $link = $(e.currentTarget);
  120. var $parent = $link.parent();
  121. var newLoc = '#' + self.getHash($link);
  122. if(!$parent.hasClass(self.config.currentClass)) {
  123. //Start callback
  124. if(self.config.begin) {
  125. self.config.begin();
  126. }
  127. //Change the highlighted nav item
  128. self.adjustNav(self, $parent);
  129. //Removing the auto-adjust on scroll
  130. self.unbindInterval();
  131. //Scroll to the correct position
  132. $.scrollTo(newLoc, self.config.scrollSpeed, {
  133. axis: 'y',
  134. easing: self.config.easing,
  135. offset: {
  136. top: -self.config.scrollOffset
  137. },
  138. onAfter: function() {
  139. //Do we need to change the hash?
  140. if(self.config.changeHash) {
  141. window.location.hash = newLoc;
  142. }
  143. //Add the auto-adjust on scroll back in
  144. self.bindInterval();
  145. //End callback
  146. if(self.config.end) {
  147. self.config.end();
  148. }
  149. }
  150. });
  151. }
  152. e.preventDefault();
  153. },
  154. scrollChange: function() {
  155. var windowTop = this.$win.scrollTop();
  156. var position = this.getSection(windowTop);
  157. var $parent;
  158. //If the position is set
  159. if(position !== null) {
  160. $parent = this.$elem.find('a[href$="#' + position + '"]').parent();
  161. //If it's not already the current section
  162. if(!$parent.hasClass(this.config.currentClass)) {
  163. //Change the highlighted nav item
  164. this.adjustNav(this, $parent);
  165. //If there is a scrollChange callback
  166. if(this.config.scrollChange) {
  167. this.config.scrollChange($parent);
  168. }
  169. }
  170. }
  171. },
  172. unbindInterval: function() {
  173. clearInterval(this.t);
  174. this.$win.unbind('scroll.onePageNav');
  175. }
  176. };
  177. OnePageNav.defaults = OnePageNav.prototype.defaults;
  178. $.fn.onePageNav = function(options) {
  179. return this.each(function() {
  180. new OnePageNav(this, options).init();
  181. });
  182. };
  183. })( jQuery, window , document );