jquery.nav.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. ; (function ($, window, document, undefined) {
  2. 'use strict';
  3. var pluginName = 'navScroll',
  4. defaults = {
  5. scrollTime: 500,
  6. navItemClassName: '',
  7. navHeight: 'auto',
  8. mobileDropdown: false,
  9. mobileDropdownClassName: '',
  10. mobileBreakpoint: 1024,
  11. scrollSpy: false
  12. };
  13. function NavScroll(element, options) {
  14. this.element = element;
  15. this.options = $.extend({},
  16. defaults, options);
  17. this._defaults = defaults;
  18. this._name = pluginName;
  19. this.init();
  20. }
  21. NavScroll.prototype = {
  22. init: function () {
  23. var self, options, element, navItem, navOffset, scrollTime;
  24. self = this;
  25. options = self.options;
  26. element = self.element;
  27. if (options.navItemClassName === '') {
  28. navItem = $(element).find('a');
  29. } else {
  30. navItem = $(element).find('.' + options.navItemClassName);
  31. }
  32. if (options.navHeight === 'auto') {
  33. navOffset = $(element).height();
  34. } else if (isNaN(options.navHeight)) {
  35. throw new Error('\'navHeight\' only accepts \'auto\' or a number as value.');
  36. } else {
  37. navOffset = options.navHeight;
  38. }
  39. navItem.on('click',
  40. function (e) {
  41. var url, parts, target, targetOffset, targetTop;
  42. url = this.href;
  43. parts = url.split('#');
  44. target = parts[1];
  45. if (target !== undefined) {
  46. e.preventDefault();
  47. targetOffset = $('#' + target).offset();
  48. targetTop = targetOffset.top;
  49. }
  50. if ($(this).data('scrolltime') !== undefined) {
  51. scrollTime = $(this).data('scrolltime');
  52. } else {
  53. scrollTime = options.scrollTime;
  54. }
  55. if (options.mobileDropdown && $(window).width() >= 0 && $(window).width() <= options.mobileBreakpoint) {
  56. if (options.mobileDropdownClassName === '') {
  57. $(element).find('ul').slideUp('fast');
  58. } else {
  59. $('.' + options.mobileDropdownClassName).slideUp('fast');
  60. }
  61. }
  62. $('html, body').stop().animate({
  63. scrollTop: targetTop - navOffset
  64. },
  65. scrollTime);
  66. });
  67. if (options.scrollSpy) {
  68. var scrollItems;
  69. scrollItems = [];
  70. navItem.each(function () {
  71. var scrollItemId = $(this).attr('href');
  72. scrollItems.push($(scrollItemId));
  73. });
  74. $(window).on('scroll',
  75. function () {
  76. self.scrollspy(navItem, scrollItems);
  77. });
  78. self.scrollspy(navItem, scrollItems);
  79. }
  80. },
  81. scrollspy: function (navItem, scrollItems) {
  82. var scrollPos, changeBounds, i, l;
  83. scrollPos = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
  84. l = navItem.length;
  85. for (i = 0; l > i; i++) {
  86. var item = scrollItems[i];
  87. if (scrollPos > (item.offset().top - 65)) {
  88. navItem.removeClass('active');
  89. $(navItem[i]).addClass('active');
  90. }
  91. }
  92. }
  93. };
  94. $.fn[pluginName] = function (options) {
  95. return this.each(function () {
  96. if (!$.data(this, 'plugin_' + pluginName)) {
  97. $.data(this, 'plugin_' + pluginName, new NavScroll(this, options));
  98. }
  99. });
  100. };
  101. })(jQuery, window, document);