关于javascript:不依赖scroll事件监听positionstickey元素的状态变化

设想一个需要场景。首页feed流，一篇文章是一个模块，文章滑出过程中须要将文章题目图钉定位。共事为了区别题目与内容，须要给题目减少暗影成果。与知乎首页相似。
DEMO
咱们能够通过监听scroll事件来实现这个性能，滚动回调中getBoundingClientRect检测元素地位判断暗影的展现状态。这样尽管能够实现，然而十分不优雅。当页面承载的内容多了回流和性能问题会很重大。
上面给出一种优雅的解决办法。
实现一个办法叫wathcSticky承受两个参数，被察看元素与它的container（不肯定是父级）。当该元素处在sitcky状态事会向外派发sticky-change事件。
自定义一个事件叫sticky-change，callback中返回以后监听的元素和一个布尔值，示意以后元素是否正处在sticky状态。

document.addEventListener("sticky-change", function (e)    {      const { detail } = e;      const { target, status } = detail;      target.classList.toggle("shadow", status);    });watchSticky(dom, container);

wathcSticky实现原理：
应用了Intersection_Observer_API，提供了一种异步检测指标元素与先人元素或viewport 相交状况变动的办法。
在指标元素的下面和指标元素父级的最底部插入两个高度为0的div，命名为topDiv和bottomDiv，应用Intersection_Observer_API监听这个两个元素与container的相交状况。
如果topDiv的top值小于containerDiv的top，并且他俩是不相交的，则证实以后元素正在sticky中。
bottomDiv的判断反之。
CODE