https://xiaoiver.github.io/assets/js/jquery.nav.js

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
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                padding: 0
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                for(var section in this.sections) {
134                    if((this.sections[section] - windowHeight) < windowPos) {
135                        returnValue = section;
136                    }
137                }
138    
139                return returnValue;
140            },
141    
142            handleClick: function(e) {
143                var self = this;
144                var $link = $(e.currentTarget);
145                var $parent = $link.parent();
146                var newLoc = '#' + self.getHash($link);
147    
148                if(!$parent.hasClass(self.config.currentClass)) {
149                    //Start callback
150                    if(self.config.begin) {
151                        self.config.begin();
152                    }
153    
154                    //Change the highlighted nav item
155                    self.adjustNav(self, $parent);
156    
157                    //Removing the auto-adjust on scroll
158                    self.unbindInterval();
159    
160                    //Scroll to the correct position
161                    self.scrollTo(newLoc, function() {
162                        //Do we need to change the hash?
163                        if(self.config.changeHash) {
164                            window.location.hash = newLoc;
165                        }
166    
167                        //Add the auto-adjust on scroll back in
168                        self.bindInterval();
169    
170                        //End callback
171                        if(self.config.end) {
172                            self.config.end();
173                        }
174                    });
175                }
176    
177                e.preventDefault();
178            },
179    
180            scrollChange: function() {
181                var windowTop = this.$win.scrollTop();

182                var position = this.getSection(windowTop);
183                var $parent;
184    
185                //If the position is set
186                if(position !== null) {
187                    $parent = this.$elem.find('a[href$="#' + position + '"]').parent();
188    
189                    //If it's not already the current section
190                    if(!$parent.hasClass(this.config.currentClass)) {
191                        //Change the highlighted nav item
192                        this.adjustNav(this, $parent);
193    
194                        //If there is a scrollChange callback
195                        if(this.config.scrollChange) {
196                            this.config.scrollChange($parent);
197                        }
198                    }
199                }
200            },
201    
202            scrollTo: function(target, callback) {
203                var offset = $(target).offset().top - this.config.padding;
204    
205                $('html, body').animate({
206                    scrollTop: offset
207                }, this.config.scrollSpeed, this.config.easing, callback);
208            },
209    
210            unbindInterval: function() {
211                clearInterval(this.t);
212                this.$win.unbind('scroll.onePageNav');
213            }
214        };
215    
216        OnePageNav.defaults = OnePageNav.prototype.defaults;
217    
218        $.fn.onePageNav = function(options) {
219            return this.each(function() {
220                new OnePageNav(this, options).init();
221            });
222        };
223    
224    })( jQuery, window , document );