CSS |位置粘滞在 IE11 上不起作用答案

【问题标题】：CSS | Position sticky not working on IE11CSS |位置粘滞在 IE11 上不起作用
【发布时间】：2019-09-03 04:07:04
【问题描述】：

我想在元素的粘性位置条件匹配时为其添加一个特定的类。我正在使用 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] });

This 是上述场景的小提琴。

谢谢

【问题讨论】：

位置粘性在 IE11 上不起作用，即使带有前缀 (caniuse.com: sticky)。
是的 ie11 不支持，但是在 stickyfill polyfill 的帮助下，我们可以使用 position:sticky

标签： javascript css sticky intersection-observer

【解决方案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);

【讨论】：