https://biblionarios.netlify.app/js/controllers/sticky-top_controller.js

1import { Controller } from "@hotwired/stimulus"
2
3export default class extends Controller {
4
5    throttle(func, wait) {
6        let waiting = false;
7        return function () {
8            if (waiting) {
9                return;
10            }
11
12            waiting = true;
13            setTimeout(() => {
14                func.apply(this, arguments);
15                waiting = false;
16            }, wait);
17        };
18    }
19
20    debounce(func, wait, maxWait) {
21        let timeout;
22        let max;
23
24        return function () {
25            const functionToCall = () => {
26                func.apply(this, arguments);
27                clearTimeout(max);
28                clearTimeout(timeout);
29                max = null;
30            };
31            if (!max) {
32                max = setTimeout(functionToCall, maxWait);
33            }
34            if (timeout) {
35                clearTimeout(timeout);
36            }
37            timeout = setTimeout(functionToCall, wait);
38        };
39    }
40    setStickyState() {
41        let stickyTop = 100;
42        var nowScrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
43        let classDown = "sticky_down", classUp = "sticky_up", classTop = "sticky_top";
44        if (Math.abs(this.lastScrollTop - nowScrollTop) >= 10) {
45            if (nowScrollTop > this.lastScrollTop) {
46                this.stickyElement.classList.add(classDown);
47                this.stickyElement.classList.remove(classUp);
48            } else {
49                this.stickyElement.classList.add(classUp);
50                this.stickyElement.classList.remove(classDown);
51            }
52            if (nowScrollTop <= stickyTop) {
53                this.stickyElement.classList.remove(classUp);
54                this.stickyElement.classList.remove(classDown);
55
56            }
57            this.lastScrollTop = nowScrollTop;
58        }
59
60    }
61    connect() {
62        let wait = 5, maxWait = 150;
63        this.stickyElement = this.element;
64        this.lastScrollTop = 0;
65        let onScroll = this.debounce(() => this.setStickyState(), wait, maxWait);
66        document.addEventListener('scroll', onScroll)
67        onScroll();
68    }
69
70   
71}