css - 固定元素内的粘性元素与固定元素外的内容一起滚动

Question

我有一个带有 position: sticky 的元素嵌套在一个带有 position: fixed 的元素中，它覆盖在页面的可滚动主要内容之上，如下所示:https://jsfiddle.net/feihcsim/z5p6tjmb/25

为什么当我在主要内容上滚动时，stickyd 元素会滚动？

Answer 1

它所做的正是 position: sticky; 所做的......

sticky 元素根据用户的滚动位置定位。

粘性元素根据滚动位置在相对和固定之间切换。它是相对定位的，直到在视口(viewport)中遇到给定的偏移位置 - 然后它“固定”在适当的位置(如位置:固定)。

注意:在 IE/Edge 15 或更早版本中不受支持。在带有 -webkit- 前缀的 Safari 6.1 版本中受支持。

当您从开始偏移它时，您看不到位置变化。

这里可以欣赏一下: https://jsfiddle.net/z5p6tjmb/39/