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