https://www.theatrefolk.com/assets/controllers/mobile_navbar_controller-5a51cbd4.js

1import { Controller } from '@hotwired/stimulus'
2
3export default class extends Controller {
4  static targets = []
5  static values = {
6    hiddenClass: String,
7    visibleClass: String,
8    delta: Number,
9  }
10
11  connect() {
12    this.navbarHeight = this.element.offsetHeight
13    this.lastScrollTop = window.scrollY
14    this.rafPending = false
15    this.rafId = null
16    this.onScroll = this.onScroll.bind(this)
17    this.checkScroll = this.checkScroll.bind(this)
18
19    window.addEventListener('scroll', this.onScroll)
20  }
21
22  disconnect() {
23    window.removeEventListener('scroll', this.onScroll)
24    if (this.rafId) cancelAnimationFrame(this.rafId)
25  }
26
27  onScroll() {
28    if (this.rafPending) return
29    this.rafPending = true
30    this.rafId = requestAnimationFrame(this.checkScroll)
31  }
32
33  checkScroll() {
34    this.rafPending = false
35
36    const currentScrollTop = window.scrollY
37    if (Math.abs(this.lastScrollTop - currentScrollTop) <= this.deltaValue) {
38      return
39    }
40
41    const docHeight = document.documentElement?.scrollHeight || 0
42    if (
43      currentScrollTop > this.lastScrollTop &&
44      currentScrollTop > this.navbarHeight
45    ) {
46      this.element.classList.add(this.hiddenClassValue)
47      this.element.classList.remove(this.visibleClassValue)
48    } else if (docHeight && currentScrollTop + window.innerHeight < docHeight) {
49      this.element.classList.remove(this.hiddenClassValue)
50      this.element.classList.add(this.visibleClassValue)
51    }
52
53    this.lastScrollTop = currentScrollTop
54  }
55}