app/assets/javascripts/sticky_tabs.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

class StickyTabs {
  constructor(stickyTabs, unstickyTabs) {
    this.stickyTabs = stickyTabs;
    this.unstickyTabs = unstickyTabs;

    this.unstickyTabsHeight = this.unstickyTabs.offsetHeight;

    this.eventListeners = {};
  }

  bindEvents() {
    this.eventListeners.handleStickyTabs = this.handleStickyTabs.bind(this);

    document.addEventListener('scroll', this.eventListeners.handleStickyTabs);
  }

  unbindEvents() {
    document.removeEventListener('scroll', this.eventListeners.handleStickyTabs);
  }

  handleStickyTabs() {
    if (this.unstickyTabs.getBoundingClientRect().top <= this.unstickyTabsHeight) {
      this.unstickyTabs.classList.add('invisible');
      this.stickyTabs.classList.remove('hide');
    } else {
      this.unstickyTabs.classList.remove('invisible');
      this.stickyTabs.classList.add('hide');
    }
  }
}

export default StickyTabs;