https://bestcarweb.jp/wp-content/themes/bestcar/js/common.js?ver=20231109

1(function(){
2
3    // ------- STARTING PROCESS FOR HIDE HEADER WHEN SCROLLING ------- //
4
5    const doc = document.documentElement;
6    const w = window;
7
8    let prevScroll = w.scrollY || doc.scrollTop;
9    let curScroll = w.scrollY || doc.scrollTop;
10
11    let prevDirection = 0;
12    let curDirection = 0;
13
14    /**
15     * How it works
16     * 
17     * Step1: Create a scroll event listener
18     * 
19     * Step2: Create a function to check scroll position on each scroll event
20     * Compare prevScroll and curScroll values to find the scroll direaction.
21     * 
22     * Scroll up:   1
23     * Scroll down: 2
24     * Scroll init: 0
25     * 
26     * Then set direction value to current scroll
27     * Compare current and prev direction, if they are difference we call the function show or hide the header
28     * 
29     * Example:
30     * 
31     * Step 1: user Scroll down: currentDirection 2, preDirection 0 ->> hide header
32     * Step 2: user scroll down again: currentDirection 2, preDirection 2 ->> do nothing (already hidden)
33     * Step 3: user scroll up: currentDirection 1, preDirection 2 ->> show header
34     */
35
36    const header = document.getElementsByClassName('l-header');
37    const threshold = jQuery('.header__wrap').height();
38    let toggled;
39
40    const checkScroll = () => {
41        curScroll = w.scrollY || doc.scrollTop;
42        if(curScroll > prevScroll) {
43            curDirection = 2
44        } else {
45            curDirection = 1
46        }
47
48        if(curDirection !== prevDirection) {
49            toggled = toggleHeader();
50        }
51
52        if(toggled) {
53            prevDirection = curDirection;
54        }
55
56        prevScroll = curScroll;
57    }
58
59    const toggleHeader = () => {
60        toggled = true
61        if(curDirection === 2 && curScroll > threshold) {
62            // header[0].classList.add('hide-header');
63            header[0].style.cssText = 'top:-' + threshold + 'px';
64        } else if(curDirection === 1) {
65            // header[0].classList.remove('hide-header');
66            header[0].style.cssText = 'top:0';
67        } else {
68            toggled = false;
69        }
70        return toggled;
71    }
72
73    window.addEventListener('scroll', checkScroll);
74
75    // ------- END PROCESS FOR HIDE HEADER WHEN SCROLLING ------- //
76
77})();