https://ohwmakers.netlify.app/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            scrollOffset: 89,
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            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;
204
205            $('html, body').animate({
206                scrollTop: offset - this.config.scrollOffset,  // this is the important line
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 );