具有绝对定位的粘性顶部 div

Question

我正在使用绝对定位让 div 填满整个浏览器窗口。但是，我不想将它与有时存在有时不存在的粘性 div 结合起来。

为了让事情更清楚一点，请查看这个 jsFiddle：http: //jsfiddle.net/henrikandersson/aDdRS/

我希望“顶部”、“左侧”和“副标题”始终保持在原位。我还希望“内容” div 填充窗口的左侧。但是，有时我想在“内容”之前显示“警报”div。到目前为止一切顺利，正如您在 jsFiddle 中看到的那样。但是，我希望“警报”坚持“副标题”并在滚动时留在那里。如您所见，如果您调整窗口大小，“警报”现在将与“内容”一起滚动——我不希望这样。

有人知道如何解决这个问题吗？

编辑：我在我的 jsFiddle 中进行了更改，我将“警报”放置在应该的位置（在子标题和内容区域之间）。如您所见（ http://jsfiddle.net/henrikandersson/aDdRS/12 ），它不会将“内容区域”向下推，因为内容区域具有顶部：20px。而且我不能设置 top:40px 例如，因为“警报”应该能够在高度上变化，并且我希望内容区域具有相同的 css，有或没有上面的警报。

编辑#2：这个问题处理同样的问题，但也没有解决这个问题的办法。似乎不使用 JavaScript 是不可能的： 可变高度滚动 div，相对于可变高度兄弟定位

原文由 Henrik Janbell 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

2018-6-18

我选择 CSS 方式 position: sticky 。

那个 https://github.com/aboulia/sticky-sidebar 。

对我不起作用（我正在使用 Vue.js 2.0 SPA 和 vue-router & vuex）

我还想要元素 position: absolute 首先，

然后 position: sticky

解决方案

1. 父 HTML 元素使用 position: absolute 以获得正确的位置。

（不要忘记为父母设置 height 。例如 height:100% ）

1. 子 HTML 元素 position: sticky

为我工作。

原文由 NamNamNam 发布，翻译遵循 CC BY-SA 4.0 许可协议