0

スティッキー位置条件が一致したときに、要素に特定のクラスを追加したい。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] });

これは、上記のシナリオのフィドルです。

ありがとう

4

1 に答える 1