绝对定位的粘性上层div [英] Sticky top div with absolute positioning

问题描述

我正在使用绝对定位使div填充整个浏览器窗口.但是，我不想将其与有时在那里且有时不在的粘性div结合使用.

I'm using absolute positioning to have a div fill up the entire browser window. However, I wan't to combine this with a sticky div that sometimes is there and sometimes not.

为了使情况更清楚，请查看以下jsFiddle: http://jsfiddle.net/henrikandersson/aDdRS /

To make things a little clearer, check out this jsFiddle: http://jsfiddle.net/henrikandersson/aDdRS/

我希望顶部"，左侧"和子标题"始终保持不变. 我还希望内容" div填充窗口的剩余内容. 但是，有时我想在内容"之前显示警报" div. 到目前为止，一切都很好，正如您在jsFiddle中所看到的.但是，我希望警报"坚持子标题"并在滚动时停留在该位置.如您所见，如果您调整窗口大小，那么警报"将随内容"一起滚动-我不希望这样.

I want the "top", "left" and "subheader" to stay where they are at all times. I also want the "content" div to fill up what is left of the window. However, sometimes I want to display the "alert" div before "content". So far so good, as you can see in the jsFiddle. But, I want "alert" to stick to the "subheader" and stay there when scrolling. As you can see if you resize the window, "alert" will now be scrolled along with "content" - I don't want it to be.

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

Anyone got an idea of how to solve this?

我在jsFiddle中进行了更改，将警报"放置在应有的位置(在子标题和内容区域之间).如您所见( http://jsfiddle.net/henrikandersson/aDdRS/12 )，它确实不要将内容区域"下推，因为内容区域具有top:20px.而且我不能设置top:40px，因为"alert"应该可以改变高度，并且我希望内容区域具有相同的CSS，无论是否带有上述警报.

I made a change in my jsFiddle, I placed the "alert" where it should be (between subheader and content-area). As you can see ( http://jsfiddle.net/henrikandersson/aDdRS/12 ) it does not push the "content-area" down since content-area has top:20px. And I can't set top:40px for example since "alert" should be able to vary in height and I want content-area to have the same css with or without the alert above.

编辑#2: 这个问题处理相同的问题，但是该问题也没有解决方案.好像不使用JavaScript是不可能的: 可变高度滚动div，相对于可变高度兄弟姐妹定位

EDIT #2: This question deals with the same problem, but there is no solution for that question either. Seems like it's not possible without using JavaScript: variable height scrolling div, positioned relative to variable height sibling

推荐答案

2018-6-18

2018-6-18

我用position: sticky选择CSS方式.

I choose the CSS way with position: sticky.

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

that https://github.com/abouolia/sticky-sidebar .
doesn't work for me (I am using Vue.js 2.0 SPA with vue-router & vuex)

我还希望元素position: absolute首先，
然后position: sticky

I also want the element position: absolute first,
and then position: sticky

1. 父HTML元素使用position: absolute拥有正确的位置.

1. parent HTML element use position: absolute to have the right position.

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

(don't forget to set height for parent. for example height:100%)

1. 子HTML元素position: sticky

为我工作.

这篇关于绝对定位的粘性上层div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！