Sticky吸顶监控

指南

由于css定位 position:sticky 没有类似于 :sticky的伪类选择器，但是可以通过js事件获取到。

代码

直接上代码：

var primaryHeader = null;
var scrollWather = null;
// 滚动条监控函数
window.onscroll = function () {
    if (primaryHeader == null) {
        primaryHeader = document.querySelector('#top');
        scrollWather = document.createElement("div");
        scrollWather.setAttribute('data-scroll-watcher', '');
        primaryHeader.before(scrollWather);
    }

    const navObserver = new IntersectionObserver((entries) => {
        primaryHeader.classList.toggle('sticking', !entries[0].isIntersecting);
    }, {rootMargin: "72px 0px 0px 0px"});

    navObserver.observe(scrollWather);
};

其中 #top 为要吸顶的div。