site/js/scroll-detector-for-header.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

document.addEventListener('DOMContentLoaded', function () {
  resolveHeadersClasses()

  document.addEventListener('scroll', () => {
    resolveHeadersClasses()
  })
})

function resolveHeadersClasses() {
  const header = document.getElementById('navigation')
  const background = 'background__white'
  const shadow = 'bottom-shadow'

  if(!header) return

  if(window?.scrollY && window.scrollY > 0) {
    if(header.classList.contains(background)) return

    header.classList.add(background)
    header.classList.add(shadow)
  } else {
    if(!header.classList.contains(background)) return

    header.classList.remove(background)
    header.classList.remove(shadow)
  }
}