detect-position-sticky

detect-position-sticky.html

<!-- HTML -->
<div id="nav-container">This will get unsticky scroll </div>
<div id="nav-container-bottom"></div>

<!-- CSS -->
// 1px tracker.
#nav-container-bottom {
  min-height: 1px;
  min-width: 1px;
}

.nav-container-sticky {
  // Separate styles for sticky element go here.
}

<!-- JS -->
// To check when element get's position sticky
var observer = new IntersectionObserver(function(entries) {
  // No intersection 
  if (entries[0].intersectionRatio === 0)
    document.querySelector("#nav-container").classList.add("nav-container-sticky");
  // Fully intersects 
  else if (entries[0].intersectionRatio === 1)
    document.querySelector("#nav-container").classList.remove("nav-container-sticky");
}, {
  threshold: [0, 1]
});


observer.observe(document.querySelector("#nav-container-bottom"));