https://puiseuxlehauberger.fr/wp-content/themes/visibilite/assets/js/inc/adico-base/AdicoStickyNavbar.js

1/**
2 * Gère le menu sticky de la navbar en prenant en compte la barre d'administration
3 * @constructor AdicoStickyNavbar
4 * @param {String} navbarSelector
5 * @param {Object} options
6 * @param {Number} options.offset - Décalage en px
7 * @param {Boolean} options.stickyOnMobile - Active le sticky sur mobile
8 * @param {Number} options.mobileBreakpoint - Largeur d'écran en dessous de laquelle le menu ne sera pas sticky
9 *
10 */
11export default class AdicoStickyNavbar {
12    options = {
13        offset: 0,
14        stickyOnMobile: true,
15        mobileBreakpoint: 992,
16        effect: null,
17    };
18
19    constructor(navbarSelector, options = null) {
20        const defaultOptions = this.options;
21        if (options) {
22            this.options = { ...defaultOptions, ...options };
23        }
24
25        this.navbar = document.querySelector(navbarSelector);
26        this.adminBar = document.querySelector("#wpadminbar");
27        this.navbarHeight = this.navbar.offsetHeight;
28
29        if(this.adminBar){
30            this.adminBarHeight = this.adminBar.offsetHeight;
31        }
32
33        this.calibrateNavbar();
34    }
35
36    calibrateNavbar() {
37        if (
38            window.innerWidth <= this.options.mobileBreakpoint &&
39            !this.options.stickyOnMobile
40        )
41            this.disabledSticky();
42
43        switch (this.options.effect) {
44            case "translateOnScroll":
45                this.setTranslateOnScroll();
46                break;
47            default:
48                this.setSticky();
49                break;
50        }
51    }
52
53    setSticky() {
54        const offset = this.getOffset();
55
56        this.navbar.style.position = "sticky";
57        this.navbar.style.top = offset + "px";
58    }
59
60    disabledSticky() {
61        this.navbar.style.position = "relative";
62        this.navbar.style.top = "unset";
63    }
64
65    setTranslateOnScroll() {
66        let lastScrollTop = 0;
67        const offset = this.getOffset();
68
69        if (window.scrollY == 0) {
70            this.navbar.style.transform = `translateY(0px)`;
71        } else {
72            this.navbar.style.transform = `translateY(${offset}px)`;
73        }
74
75        document.addEventListener("scroll", (e) => {
76            const scrollTop = window.scrollY;
77            const scrollToTop = scrollTop < lastScrollTop;
78
79            if (scrollToTop) {
80                if (scrollTop == 0) {
81                    this.navbar.style.transform = `translateY(0px)`;
82                    return;
83                }
84                this.navbar.style.transform = `translateY(${this.getOffset()}px)`;
85            } else {
86                this.navbar.style.transform = `translateY(-${this.navbarHeight}px)`;
87            }
88            lastScrollTop = scrollTop;
89        });
90    }
91
92    isAdminBarSticky() {
93        if (this.isAuth()) {
94            const adminBarStyles = window.getComputedStyle(this.adminBar);
95            const adminBarPosition =
96                adminBarStyles.getPropertyValue("position");
97            return adminBarPosition === "fixed" ? true : false;
98        } else {
99            return false;
100        }
101    }
102
103    isAuth() {
104        return this.adminBar ? true : false;
105    }
106
107    getOffset(){
108        return this.isAdminBarSticky() ? this.options.offset + this.adminBarHeight : this.options.offset;
109    }
110}