1 |
57592
|
stefania.m
|
/*
|
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 |
|
|
|
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 |
|
|
scrollOffset: 0,
|
44 |
|
|
scrollSpeed: 750,
|
45 |
|
|
scrollThreshold: 0.5,
|
46 |
|
|
begin: false,
|
47 |
|
|
end: false,
|
48 |
|
|
scrollChange: false
|
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 |
|
|
// Sort Sections by Position
|
134 |
|
|
this.sections = this.sortSectionsByPosition(this.sections);
|
135 |
|
|
|
136 |
|
|
for(var section in this.sections) {
|
137 |
|
|
if((this.sections[section] - windowHeight) < windowPos) {
|
138 |
|
|
returnValue = section;
|
139 |
|
|
}
|
140 |
|
|
}
|
141 |
|
|
|
142 |
|
|
return returnValue;
|
143 |
|
|
},
|
144 |
|
|
|
145 |
|
|
/**
|
146 |
|
|
* Sort Sections by its position value
|
147 |
|
|
* based on http://am.aurlien.net/post/1221493460/sorting-javascript-objects
|
148 |
|
|
* @param {Object} obj Object to sort
|
149 |
|
|
* @return {Object} sorted Object
|
150 |
|
|
*/
|
151 |
|
|
sortSectionsByPosition: function (obj) {
|
152 |
|
|
var tempArray = [];
|
153 |
|
|
var tempObj = {};
|
154 |
|
|
|
155 |
|
|
// Transform Object in Array
|
156 |
|
|
for (var key in obj) {
|
157 |
|
|
if (obj.hasOwnProperty(key)) {
|
158 |
|
|
tempArray.push(key);
|
159 |
|
|
}
|
160 |
|
|
}
|
161 |
|
|
|
162 |
|
|
tempArray.sort(function(a,b) {
|
163 |
|
|
var x = obj[a];
|
164 |
|
|
var y = obj[b];
|
165 |
|
|
|
166 |
|
|
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
|
167 |
|
|
});
|
168 |
|
|
|
169 |
|
|
// Transform sorted tempArray back into Object
|
170 |
|
|
for (var i=0; i<tempArray.length; i++) {
|
171 |
|
|
tempObj[tempArray[i]] = obj[tempArray[i]];
|
172 |
|
|
}
|
173 |
|
|
|
174 |
|
|
return tempObj;
|
175 |
|
|
},
|
176 |
|
|
|
177 |
|
|
handleClick: function(e) {
|
178 |
|
|
var self = this;
|
179 |
|
|
var $link = $(e.currentTarget);
|
180 |
|
|
var $parent = $link.parent();
|
181 |
|
|
var newLoc = '#' + self.getHash($link);
|
182 |
|
|
|
183 |
|
|
if(!$parent.hasClass(self.config.currentClass)) {
|
184 |
|
|
//Start callback
|
185 |
|
|
if(self.config.begin) {
|
186 |
|
|
self.config.begin();
|
187 |
|
|
}
|
188 |
|
|
|
189 |
|
|
//Change the highlighted nav item
|
190 |
|
|
self.adjustNav(self, $parent);
|
191 |
|
|
|
192 |
|
|
//Removing the auto-adjust on scroll
|
193 |
|
|
self.unbindInterval();
|
194 |
|
|
|
195 |
|
|
//Scroll to the correct position
|
196 |
|
|
self.scrollTo(newLoc, function() {
|
197 |
|
|
//Do we need to change the hash?
|
198 |
|
|
if(self.config.changeHash) {
|
199 |
|
|
window.location.hash = newLoc;
|
200 |
|
|
}
|
201 |
|
|
|
202 |
|
|
//Add the auto-adjust on scroll back in
|
203 |
|
|
self.bindInterval();
|
204 |
|
|
|
205 |
|
|
//End callback
|
206 |
|
|
if(self.config.end) {
|
207 |
|
|
self.config.end();
|
208 |
|
|
}
|
209 |
|
|
});
|
210 |
|
|
}
|
211 |
|
|
|
212 |
|
|
e.preventDefault();
|
213 |
|
|
},
|
214 |
|
|
|
215 |
|
|
scrollChange: function() {
|
216 |
|
|
var windowTop = this.$win.scrollTop();
|
217 |
|
|
var position = this.getSection(windowTop);
|
218 |
|
|
var $parent;
|
219 |
|
|
|
220 |
|
|
//If the position is set
|
221 |
|
|
if(position !== null) {
|
222 |
|
|
$parent = this.$elem.find('a[href$="#' + position + '"]').parent();
|
223 |
|
|
|
224 |
|
|
//If it's not already the current section
|
225 |
|
|
if(!$parent.hasClass(this.config.currentClass)) {
|
226 |
|
|
//Change the highlighted nav item
|
227 |
|
|
this.adjustNav(this, $parent);
|
228 |
|
|
|
229 |
|
|
//If there is a scrollChange callback
|
230 |
|
|
if(this.config.scrollChange) {
|
231 |
|
|
this.config.scrollChange($parent);
|
232 |
|
|
}
|
233 |
|
|
}
|
234 |
|
|
}
|
235 |
|
|
},
|
236 |
|
|
|
237 |
|
|
scrollTo: function(target, callback) {
|
238 |
|
|
var offset = $(target).offset().top;
|
239 |
|
|
$('html, body').animate({
|
240 |
|
|
scrollTop: offset + this.config.scrollOffset
|
241 |
|
|
}, this.config.scrollSpeed, this.config.easing, callback);
|
242 |
|
|
},
|
243 |
|
|
|
244 |
|
|
unbindInterval: function() {
|
245 |
|
|
clearInterval(this.t);
|
246 |
|
|
this.$win.unbind('scroll.onePageNav');
|
247 |
|
|
}
|
248 |
|
|
};
|
249 |
|
|
|
250 |
|
|
OnePageNav.defaults = OnePageNav.prototype.defaults;
|
251 |
|
|
|
252 |
|
|
$.fn.onePageNav = function(options) {
|
253 |
|
|
return this.each(function() {
|
254 |
|
|
new OnePageNav(this, options).init();
|
255 |
|
|
});
|
256 |
|
|
};
|
257 |
|
|
|
258 |
|
|
})( jQuery, window , document );
|