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

30次阅读

共计 787 个字符，预计需要花费 2 分钟才能阅读完成。

设想一个需要场景。首页 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

正文完