javascript - CSS | 位置粘滞在 IE11 上不起作用

Question

当粘性位置条件匹配时，我想向元素添加一个特定的类。我正在使用 Intersection Observation API 来检查元素何时获得它的粘性位置。代码在除 IE11 之外的所有浏览器中运行良好。我为 IE 的 Intersection Observation API 添加了 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] });

这是上述场景的小提琴。

谢谢

Answer 1

Polyfill：stickyfill https://cdnjs.cloudflare.com/ajax/libs/stickyfill/2.1.0/stickyfill.min.js 可以在这里使用。还需要添加以下初始化逻辑：

var element = document.querySelector('#nav-container');
Stickyfill.add(element);