坚固的顶部div与绝对定位

Question

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

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

我希望“top”，“left”和“subheader”始终保持原状。 我还想要“内容”div来填充窗口剩下的内容。 但是，有时我想在“内容”之前显示“alert”div。 到目前为止这么好，正如你在jsFiddle中看到的那样。但是，我希望“警告”坚持“副标题”并在滚动时保持在那里。正如您所看到的那样，如果您调整窗口大小，“alert”现在将与“内容”一起滚动 - 我不希望它出现。

任何人都知道如何解决这个问题？

编辑： 我在我的jsFiddle中进行了更改，我将“alert”置于应该位于的位置（在subheader和content-area之间）。正如你所看到的那样（http://jsfiddle.net/henrikandersson/aDdRS/12）它没有推动“内容区域”，因为内容区域有顶部：20px。我无法设置顶部：例如40px，因为“alert”应该能够改变高度，并且我希望内容区域具有相同的css，无论是否有上述警报。

编辑＃2：编辑＃2： 这个问题涉及同样的问题，但也没有解决这个问题的方法。似乎没有使用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＆amp; vuex）

我首先想要元素position: absolute，
然后position: sticky

解决方案

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

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

1. 子HTML元素position: sticky

为我工作。

Answer 2

编辑
更新一些增强功能
http://jsfiddle.net/aDdRS/11/

---

第一篇文章 为什么不滚动.content而不是.content-area

http://jsfiddle.net/aDdRS/8/

Answer 3

使用 float：向左；和width：0; ，您可以使用transform：translateX（xxx）;设置左位置。

问题已解决：）

Answer 4

毕竟我选择使用JavaScript方法。本来希望采用纯CSS方法，但我对IE8支持的需求阻碍了。 Myles Gray的回答几乎就是我所做的 - https://stackoverflow.com/a/4933509/940517