https://la-voyageuse.herokuapp.com/assets/controllers/navbar_contr…b56c4757fa78f69c4ccd9c93d63d47a0a9c1cc24.js

1import { Controller } from "@hotwired/stimulus"
2
3export default class extends Controller {
4
5  // If home ==>  "with-search" class starting from x
6  // If home ==> no "with-search" class from 0 to x scrollY
7  // x determined by the position of the second navbar
8
9  connect () {
10    // console.log(`Hello from ${this.identifier} controller`);
11    this.bindedHandleScroll = this.handleScroll.bind(this)
12    window.addEventListener("scroll", this.bindedHandleScroll)
13
14    this.handleScroll();
15  }
16
17  disconnect () {
18    window.removeEventListener("scroll", this.bindedHandleScroll)
19  }
20
21  handleScroll (e) {
22    // console.log("handling scroll");
23    const searchBars = document.querySelectorAll(".search-bar");
24    if(searchBars.length < 2) return;
25
26    const navTop = searchBars[1].offsetTop;
27
28    if(window.scrollY > (navTop + 100)) {
29      this.element.classList.add("with-search")
30    } else {
31      this.element.classList.remove("with-search")
32    }
33  }
34};