Position Sticky alternative

Quando se utiliza uma position sticky, nenhum dos parents podem ter overflow hidden, se não tiverem uma altura atribuída. Utilizar o Intersection Observer é uma alternativa a isso

by Hugo Vale Pereira

HTML

<!--Referências
  -> https://uxdesign.cc/position-stuck-96c9f55d9526
  -> https://css-tricks.com/dealing-with-overflow-and-position-sticky/
-->

<header></header>
<nav></nav>

CSS

body {
  margin: 0;
  height: 200vh;
}
header {
  background: cyan;
  height: 80px;
}
nav {
  background: magenta;
  height: 80px;
  position: sticky;
  top: -2px;
}
nav[stuck] {
  box-shadow: 0 0 16px black;
}

JavaScript

const observer = new IntersectionObserver(
  ([e]) => e.target.toggleAttribute("stuck", e.intersectionRatio < 1),
  { threshold: [1] }
);

observer.observe(document.querySelector("nav"));