Sticky nav

stickynav.js

const stickyNav = document.querySelector('.site-header')
const header = document.getElementById('n2-ss-2')
const navHeight =  document.querySelector('.site-header').getBoundingClientRect().height;
console.log(navHeight)

// Callback
const obsCallback = (entries, unobserver) => {
  const [entry] = entries;
  if (!entry.isIntersecting) stickyNav.classList.add("sticky-nav");
  else stickyNav.classList.remove("sticky-nav");
}

// Option
const obsOption = {
  root: null,
  threshold: 0,
  rootMargin: `-${navHeight}px`
}

const observer = new IntersectionObserver(obsCallback, obsOption);

window.onload = function(){
  if(header != null) {
    observer.observe(header);
  }
}