スティッキー位置条件が一致したときに、要素に特定のクラスを追加したい。Intersection Observation API を使用して、要素がいつスティッキー位置になるかを確認しています。コードは IE11 を除くすべてのブラウザで正常に動作しています。Intersection Observation API for IE の polyfill を追加しました。
var observer = new IntersectionObserver(function(entries) {
// no intersection with screen
if(entries[0].intersectionRatio === 0)
document.querySelector("#nav-container").classList.add("nav-container-sticky");
// fully intersects with screen
else if(entries[0].intersectionRatio === 1)
document.querySelector("#nav-container").classList.remove("nav-container-sticky");
}, { threshold: [0,1] });
これは、上記のシナリオのフィドルです。
ありがとう