[Javascript Sticky Nav] vanilla javascript sticky nav with offset using the Intersection Observer API

script.js

const header = document.querySelector('.header');

const navHeight = nav.getBoundingClientRect().height;

const stickyNav = function (entries) {
  const [entry] = entries;

  if (!entry.isIntersecting) nav.classList.add('sticky');
  else nav.classList.remove('sticky');
};

const headerObserver = new IntersectionObserver(stickyNav, {
  root: null,
  threshold: 0,
  rootMargin: `-${navHeight}px`,
});

headerObserver.observe(header);

/*
Assumption is you have a 'nav' class - plus you'll need to add the CSS below to your stylesheet:

.nav.sticky {
  position: fixed;
  background-color: rgba(255, 255, 255, 0.95);
}

*/