Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.

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