javascript - 卡在粘性 header 上

Question

几个小时以来，我一直在努力弄清楚这是如何完成的，但距离我刚开始的时候还差不了多少。

<div class="container">
    <div class="fixed-top-bar"></div>
    <div class="scrolling-bottom-bar"></div>
</div>

我想做的事情有 3 个方面。

fixed-top-bar 总是fixed(当然容易)

scrolling-bottom-bar 最初位于 fixed-top-bar 下方(只需添加偏移量(例如上边距)即可轻松实现)。

但是，这是我坚持的一点。 容器(或设计的最低部分)在底部有一个阴影，表示它被抬高了。最初这个阴影位于 scrolling-lower-bar 下方，但随着它消失在视野之外，阴影仍然粘在 fixed-top-bar 上。

我不确定这是否可以用 html/css 来完成，还是需要一些 js。这里有一个例子来说明我一直试图复制的内容。

example

Answer 1

如果您使用检查器 (f12) 检查源代码，当您向下滚动时，您会看到某些元素的 css 发生了变化。此更改必须通过一些 javascript 代码完成，当用户向下滚动时会提示。