在現在用 css 的 position: sticky 就可以設定當區塊超過可視範圍後就卡在頁面上某處的效果,不過如果除了卡住外還想修改樣式,就還是得用 javascript 來處理。
這邊先把 css sticky 的 top 設定成 -1px,這樣可以讓這區塊超出可視範圍。
1 2 3 4 5 6 7 8 9 | .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 事件效能好很多。
1 2 3 4 5 6 7 | 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