app/javascript/controllers/sticky_issue_header_controller.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  static targets = ["original", "stickyHeader"];

  connect() {
    if (!this.originalTarget || !this.stickyHeaderTarget) return;

    this.observer = new IntersectionObserver(
      ([entry]) => {
        this.stickyHeaderTarget.classList.toggle("is-visible", !entry.isIntersecting);
      },
      { threshold: 0 }
    );

    this.observer.observe(this.originalTarget);
  }

  disconnect() {
    this.observer?.disconnect();
  }
}