css - 检查DIV是否有粘性

Question

我正在使用 Bootstrap 4 类“sticky-top”(用于位置:粘性)来粘贴元素，你猜对了，在顶部。

有什么方法可以在 DIV “卡住”时向它添加一个额外的类，例如“is-sticky-top”？

我找到了它，但无法根据我的需要对其进行调整:https://developers.google.com/web/updates/2017/09/sticky-headers

编辑 - 阐明我需要什么:

“sticky-top”类将 position:sticky 添加到元素。就我而言，如果 DIV 的位置粘在顶部，我想向 DIV 添加一个额外的类。例如，向元素添加阴影，但前提是它“卡在”顶部。所以我只在这种情况下需要 B 类

Answer 1

嘿，我发布了一篇关于此的 Medium 文章。可能适用于也可能不适用于您的特定用例，但我建议您花几分钟时间检查一下。

https://medium.com/@parkjoon94/activatable-drop-shadow-on-sticky-elements-d0c12f1ebfdf

因此该技术的基本要点是使用一个元素来覆盖您的阴影，当用户滚动时，覆盖物向上滚动以“发现”其背后的阴影。

这是一个正在运行的 JSFiddle:https://jsfiddle.net/parkjoon/tp1e9yad/

.shadow {
  position: sticky;
  top: 200px;
  width: 297px;
  box-shadow: 0px 0.5px 0.5px 1.5px rgba(0,0,0,0.75);
}

.cover {
  position: absolute;
  background: white;
  width: 100%;
  height: 3px;
}