https://1lexhamgardens.com/wp-content/themes/milenia/assets/js/modules/milenia.sticky-header-section.js

1var MileniaStickyHeaderSection = (function($){
2    'use strict';
3
4    if(!$) return;
5
6    var _config = {
7        cssPrefix: 'milenia-',
8        resizeDelay: 50,
9        classMap: {
10            hiddenSection: 'header-section--sticky-hidden',
11            active: 'header-section--sticked',
12            container: 'header',
13            spaceException: 'header--transparent-single',
14            exceptionForSpaceException: 'header--breadcrumb-part'
15        },
16        breakpointMap: {
17            xs: 0,
18            sm: 576,
19            md: 768,
20            lg: 992,
21            xl: 1200,
22            xxl: 1380,
23            xxxl: 1600
24        },
25        animationDuration: 400,
26        animationEasing: 'linear'
27    };
28
29    var $body = $('body');
30
31    function StickySection($element, config) {
32        this.$element = $element;
33        this.config = $.extend(true, {}, _config, (config || {}));
34
35        this.updateDocumentState();
36
37        Object.defineProperties(this, {
38            activeClass: {
39                get: function() {
40                    return this.config.cssPrefix + this.config.classMap.active;
41                }
42            },
43            sticked: {
44                get: function() {
45                    return this.$element.hasClass(this.activeClass);
46                }
47            },
48            $hiddenSections: {
49                get: function() {
50                    return this.$element.find('.' + this.config.cssPrefix + this.config.classMap.hiddenSection);
51                }
52            },
53            isSuitable: {
54                get: function() {
55                    var $w = $(window);
56
57                    return this.$element.hasClass(this.config.cssPrefix + 'header-section--sticky-xs') && $w.width() > this.config.breakpointMap.xs ||
58                            this.$element.hasClass(this.config.cssPrefix + 'header-section--sticky-sm') && $w.width() > this.config.breakpointMap.sm ||
59                            this.$element.hasClass(this.config.cssPrefix + 'header-section--sticky-md') && $w.width() > this.config.breakpointMap.md ||
60                            this.$element.hasClass(this.config.cssPrefix + 'header-section--sticky-lg') && $w.width() > this.config.breakpointMap.lg ||
61                            this.$element.hasClass(this.config.cssPrefix + 'header-section--sticky-xl') && $w.width() > this.config.breakpointMap.xl ||
62                            this.$element.hasClass(this.config.cssPrefix + 'header-section--sticky-xxl') && $w.width() > this.config.breakpointMap.xxl ||
63                            this.$element.hasClass(this.config.cssPrefix + 'header-section--sticky-xxxl') && $w.width() > this.config.breakpointMap.xxxl;
64                }
65            },
66            $container: {
67                get: function() {
68                    return this.$element.closest('.' + this.config.cssPrefix + this.config.classMap.container);
69                }
70            },
71            spaceExceptionClass: {
72                get: function() {
73                    return this.config.cssPrefix + this.config.classMap.spaceException;
74                }
75            },
76            exceptionForSpaceExceptionClass: {
77                get: function() {
78                    return this.config.cssPrefix + this.config.classMap.exceptionForSpaceException;
79                }
80            }
81        });
82
83        this._bindEvents();
84    };
85
86    StickySection.prototype.updateDocumentState = function() {
87        var $wpAdminBar = $('#wpadminbar');
88
89        this.topOffset = this.$element.offset().top;
90        this.defaultBodyPadding = parseInt($body.css('padding-top'), 10);
91
92        if($wpAdminBar.length) {
93            this.topOffset -= $wpAdminBar.outerHeight();
94        }
95        return this;
96    };
97
98    StickySection.prototype.sticky = function() {
99        this.$element.addClass(this.activeClass);
100        this._addSpace().hideSections();
101
102        return this;
103    };
104
105    StickySection.prototype.unsticky = function () {
106        this.$element.removeClass(this.activeClass);
107        this._removeSpace().showSections();
108
109        return this;
110    };
111
112    StickySection.prototype._addSpace = function() {
113        if(!this.$container.hasClass(this.spaceExceptionClass) || this.$container.hasClass(this.exceptionForSpaceExceptionClass)) {
114            $body.css('padding-top', this.defaultBodyPadding + this.$element.outerHeight()).trigger('spaceadded.milenia.stickysection');
115        }
116
117        return this;
118    };
119
120    StickySection.prototype._removeSpace = function() {
121        if(!this.$container.hasClass(this.spaceExceptionClass) || this.$container.hasClass(this.exceptionForSpaceExceptionClass)) {
122            $body.css('padding-top', this.defaultBodyPadding).trigger('spaceremoved.milenia.stickysection');
123        }
124
125        return this;
126    };
127
128    StickySection.prototype.hideSections = function() {
129        var self = this,
130            timeOutId;
131
132        if(this.$hiddenSections.length) {
133            this.$hiddenSections.stop().slideUp({
134                easing: self.config.animationEasing,
135                duration: self.config.animationDuration,
136                step: function() {
137                    self._addSpace();
138
139                    if(window.Milenia && window.Milenia.helpers && window.Milenia.helpers.PageStretcher) {
140                        window.Milenia.helpers.PageStretcher.stretch();
141                    }
142                },
143                complete: function() {
144                    $(this).css({
145                        'height': ''
146                    });
147
148                    if(window.Milenia && window.Milenia.helpers && window.Milenia.helpers.PageStretcher) {
149                        window.Milenia.helpers.PageStretcher.stretch();
150                    }
151                }
152            });
153        }
154
155        return this.$hiddenSections;
156    };
157
158    StickySection.prototype.showSections = function() {
159        var self = this;
160
161        if(this.$hiddenSections.length) {
162            this.$hiddenSections.stop().slideDown({
163                easing: self.config.animationEasing,
164                duration: self.config.animationDuration,
165                step: function() {
166                    var timeOutId;
167
168                    if(window.Milenia && window.Milenia.helpers && window.Milenia.helpers.PageStretcher) {
169                        window.Milenia.helpers.PageStretcher.stretch();
170                    }
171                },
172                complete: function() {
173                    $(this).css({
174                        'height': '',
175                        'display': ''
176                    });
177
178                    if(window.Milenia && window.Milenia.helpers && window.Milenia.helpers.PageStretcher) {
179                        window.Milenia.helpers.PageStretcher.stretch();
180                    }
181                }
182            });
183        }
184
185        return this.$hiddenSections;
186    };
187
188    StickySection.prototype._bindEvents = function() {
189        var $w = $(window),
190            self = this;
191
192        $w.on('scroll.MileniaStickyHeaderSection', function(event) {
193
194            if($w.scrollTop() > self.topOffset && !self.sticked && self.isSuitable) {
195                self.sticky();
196            }
197            else if($w.scrollTop() <= self.topOffset && self.sticked && self.isSuitable) {
198                self.unsticky();
199            }
200        })
201        .on('resize.MileniaStickyHeaderSection', function(event) {
202            if(self.resizeTimeOutId) clearTimeout(self.resizeTimeOutId);
203
204            self.resizeTimeOutId = setTimeout(function() {
205                self.unsticky().updateDocumentState();
206                if($w.scrollTop() > self.topOffset && !self.sticked && self.isSuitable) self.sticky();
207
208                if(!self.isSuitable) self.showSections();
209
210            }, self.config.resizeDelay);
211        })
212        .trigger('scroll.MileniaStickyHeaderSection');
213    };
214
215    return StickySection;
216
217})(window.jQuery);