https://keloresort.com/wp-content/themes/kiska/js/scroll-position.js?ver=2025-09-30-T09%3A08%3A22Z

1
2/* Kiska peruspohja - Scroll position */
3
4/**
5 * Stores a reference to the body element.
6 */
7var kiska_$body = $();
8
9/**
10 * Stores a reference to the branding header element.
11 */
12var kiska_$brandingHeader = $();
13
14/**
15 * Stores a reference to the info header element.
16 */
17var kiska_$infoHeader = $();
18
19/**
20 * Stores a reference to the main header element.
21 */
22var kiska_$mainHeader = $();
23
24/**
25 * Stores a reference to the hero element.
26 */
27var kiska_$hero = $();
28
29var booking_container =  $('.booking-form-container');
30
31/**
32 * Finds the body element and header elements and stores a reference to them in global variables.
33 */
34function kiska_findScrollPositionElements() {
35
36    // Find the body element
37    kiska_$body = $(document.body);
38
39    // Find header elements
40    let header = $('header.o-site-header');
41    if(header.length) {
42        kiska_$brandingHeader = header.find('section.s-branding-header');
43        kiska_$infoHeader = header.find('section.s-info-header');
44        kiska_$mainHeader = header.find('section.s-main-header');
45    }
46
47    let hero = $('.s-hero-section');
48
49    if (hero.length) {
50        kiska_$hero = hero.find('.m-hero__image-container');
51    }
52}
53
54/**
55 * Checks and returns the visible height of the branding header (if one exists).
56 */
57function kiska_getBrandingHeaderHeight() {
58    if(kiska_$brandingHeader.length) {
59        return kiska_$brandingHeader.height();
60    }
61    return 0;
62}
63
64/**
65 * Checks and returns the visible height of the info header (if one exists).
66 */
67function kiska_getInfoHeaderHeight() {
68    if(kiska_$infoHeader.length) {
69        return kiska_$infoHeader.height();
70    }
71    return 0;
72}
73
74/**
75 * Checks and returns the visible height of the main header (if one exists).
76 */
77function kiska_getMainHeaderHeight() {
78    if(kiska_$mainHeader.length) {
79        return kiska_$mainHeader.height();
80    }
81    return 0;
82}
83
84function kiska_getHeroHeight() {
85    if(kiska_$hero.length) {
86        return kiska_$hero.height();
87    }
88    return 0;
89}
90
91/**
92 * Päivittää tiettyjen elementtien tämän hetkiset mittasuhteet CSS-muuttujiin.
93 */
94function kiska_updateElementDimensions() {
95
96    if (!kiska_$infoHeader.length) {
97        kiska_$infoHeader = kiska_$body.find('.s-crisis-section.-before-hero');
98    }
99
100    let root = document.documentElement;
101    root.style.setProperty('--info-header-height', kiska_getInfoHeaderHeight() + "px");
102    root.style.setProperty('--main-header-height', kiska_getMainHeaderHeight() + "px");
103}
104
105/**
106 * Toggles the specified class name for the <body> element at the specified threshold.
107 * 
108 * The class name will be added to the <body> element when the scroll top -value is larger than the threshold and removed when equal or smaller than the threshold.
109 * 
110 * @param {*} className The name of the class that should be toggled
111 * @param {*} threshold The desired threshold, e.g. 40 (for 40 pixels)
112 * @param {*} scrollTop The current scroll top -value. Must be specified for optimization reasons.
113 */
114function kiska_scrollPositionClassToggle(className, threshold, scrollTop) {
115
116    // console.log('Toggling class "'+className+'" with threshold '+threshold);
117
118    if(kiska_$body.length) {
119
120        if (className === 'attach-booking') {
121            if (scrollTop > threshold) {
122                if ( ! booking_container.hasClass(className) ) {
123                    booking_container.toggleClass(className);
124                }
125            }    
126            else {
127                if ( booking_container.hasClass(className) ) {
128                    booking_container.toggleClass(className);
129                }
130            }
131        } else if (className === '-no-hero') {
132            if (scrollTop > threshold) {
133                if ( ! booking_container.hasClass(className) ) {
134                    booking_container.toggleClass(className);
135                }
136            }    
137            else {
138                if ( booking_container.hasClass(className) ) {
139                    booking_container.toggleClass(className);
140                }
141            }
142        } else {
143            if (scrollTop > threshold) {
144                if ( ! kiska_$body.hasClass(className) ) {
145                    kiska_$body.toggleClass(className);
146                }
147            }    
148            else {
149                if ( kiska_$body.hasClass(className) ) {
150                    kiska_$body.toggleClass(className);
151                }
152            }
153        }
154
155    }
156}
157
158/*
159 * A throttled scroll listener that checks how much the screen has been scrolled down and toggles appropriate classes for the <body> element.
160 *
161 * @see util.js - kiska_throttle()
162 */
163var kiska_scrollListener = kiska_throttle(function() {
164
165    // console.log('Window scroll listener triggered!');
166    
167    // Determine the current scroll top -value, that is, the distance the page has been scrolled down
168    let scrollTop = $(window).scrollTop();
169
170    // Determine viewport width
171    let vw = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
172
173    // If the admin bar is visible, and fixed to the viewport (We need to account for the admin bar)
174    if(kiska_$body.hasClass('admin-bar') && vw <= kiska_adminBarBreakpointFixed) {
175        kiska_scrollPositionClassToggle("-scrolled-past-wp-admin-bar", kiska_adminBarHeightMobile, scrollTop);
176        kiska_scrollPositionClassToggle("-scrolled-past-info-header",  kiska_adminBarHeightMobile + kiska_getBrandingHeaderHeight() + kiska_getInfoHeaderHeight(), scrollTop);
177    }
178    
179    // Otherwise (We don't need to account for the admin bar)
180    else {
181        kiska_scrollPositionClassToggle("-scrolled-past-info-header",  kiska_getBrandingHeaderHeight() + kiska_getInfoHeaderHeight(), scrollTop);
182
183        // Different header heights for mobile vs desktop
184        let headerOffset = vw < 992 ? 64 : 80; // 80px for mobile (< lg breakpoint), 64px for desktop
185        let device = vw < 992 ? 'mobile' : 'desktop';
186
187        let header = $('header.o-site-header');
188
189
190
191        if (header.hasClass('-transparent') && device === 'desktop') {
192            kiska_scrollPositionClassToggle("-scrolled-past-hero", kiska_getHeroHeight() - headerOffset, scrollTop);
193        } else {
194            kiska_scrollPositionClassToggle("-scrolled-past-hero", kiska_getHeroHeight() + kiska_getInfoHeaderHeight(), scrollTop);
195        }
196
197        // booking.form.submit luokkaan lisätään .attach-booking
198        if (kiska_getHeroHeight() === 0) {
199            kiska_scrollPositionClassToggle("-no-hero", kiska_getHeroHeight() - 1, scrollTop);
200        } else {
201            kiska_scrollPositionClassToggle("attach-booking", kiska_getHeroHeight() - headerOffset, scrollTop);
202        }
203    }
204
205    // 'Takaisin ylös' -toiminto
206    kiska_scrollPositionClassToggle("-scrolled-past-back-to-top-threshold",  kiska_backToTopThreshold, scrollTop);
207
208    // Päivitetään elementtien mitat
209    kiska_updateElementDimensions();
210    
211}, 10, false);
212
213$(document).ready(function() {
214
215    // Find some elements so that we can reference them later
216    // This is done for optimization reasons, because querying the DOM is expensive

217    kiska_findScrollPositionElements();
218
219	// Add our scroll listener to the 'scroll' and 'resize' events
220	window.addEventListener('scroll', kiska_scrollListener);
221    window.addEventListener('resize', kiska_scrollListener);
222    
223    // Run the listener once
224    kiska_scrollListener();
225	
226});