利用 javascript 在 css 設定 sticky 且區塊固定位置後也改變樣式

在現在用 css 的 position: sticky 就可以設定當區塊超過可視範圍後就卡在頁面上某處的效果，不過如果除了卡住外還想修改樣式，就還是得用 javascript 來處理。

這邊先把 css sticky 的 top 設定成 -1px，這樣可以讓這區塊超出可視範圍。

.nav {
  position: sticky;
  top: -1px;
}

/* styles for when the header is in sticky mode */
.nav.active {
  background: rgba(0,0,0,.8);
} 

接著利用 js 的 IntersectionObserver 來偵測目標區塊後判斷是否要添加 class，會比 scroll 事件效能好很多。

const el = document.querySelector(".nav")
const observer = new IntersectionObserver( 
  ([e]) => e.target.classList.toggle("active", e.intersectionRatio < 1),
  { threshold: [1] }
);

observer.observe(el);

效果可以參考這頁。

參考文章：
position:sticky : Adding style when the element detaches from normal flow