html - 如何使固定元素仅在其父元素可见时可见？

Question

我正在处理的网站有几个 div 部分，每个部分的宽度和高度与视口(viewport)相同。它们垂直堆叠，每个都有相对定位(参见 Codepen )。每个元素内部都有一个固定位置的 h1。我希望每个元素中的固定 h1 仅在其各自的父元素可见时才保持可见。

我已经尝试了很多 z-index 实验，但都没有成功。关于接下来要尝试什么有什么想法吗？

Answer 1

因为固定位置元素位于视口(viewport)中而不是 DOM 中。这意味着您将需要操纵 HTML 标记，使您想做的事情变得几乎不可能。

虽然有两个选项，第一个是将位置更改为绝对位置(对位置的调整基于具有相对、绝对、固定或 DOM 根位置的壁橱父元素)并隐藏适当的父元素。

第二种选择是使用您最喜欢的 JS 库简单地隐藏和显示固定元素以响应用户交互而不是包装它。