粘性定位生效时添加样式

发表于 更新于 本文字数： 280 阅读时长 ≈ 1 分钟

写 duozhuavue💚 主页面时，希望书籍类别的 Title 在 sticky 生效时，添加一个下边界。

效果

样例预览

Intersection Observer API 提供了一种异步检测目标元素与祖先元素或 viewport 相交情况变化的方法。

基本步骤

  1. 确定目标元素、根元素
  2. 设置监听回调（利用相交的比例或者变化）
  3. 监听

问题

  • 设置根元素时使用了固定大小的像素，意味着只有在全屏下样式才会生效
  • 第二个粘性元素生效时，第一个粘性元素的样式并没有移除，样例中它藏在了 .dogs 元素的下面，不会影响观感。

参考