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

Question

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

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

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

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

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

编辑#2:This question处理相同的问题，但也没有解决该问题的方法。似乎不使用 JavaScript 是不可能的: variable height scrolling div, positioned relative to variable height sibling

Answer 1

2018-6-18

我选择了 position: sticky 的 CSS 方式。

那个https://github.com/abouolia/sticky-sidebar .
对我不起作用(我正在使用 Vue.js 2.0 SPA 和 vue-router & vuex)

我还想要元素 position: absolute 第一，
然后是 position: sticky

解决方案

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

(不要忘记为父级设置高度。例如height:100%)

1. 子 HTML 元素 位置:粘性

为我工作。