在具有滚动-y 的 div 上浮动 div答案

【问题标题】：Float div on top of div that has scroll-y在具有滚动-y 的 div 上浮动 div
【发布时间】：2014-04-08 08:27:58
【问题描述】：

所以我希望当用户向下滚动 div（注意 div）时滚动 div。这是html：

<body>
<div class="container">
<div class="floaty">Yep</div>
content
</div>

所以容器大约是 700px 高度（动态高度取决于里面的内容）但是它在 css 中设置了滚动 y 和 x。因此，当滚动内容时，您不会滚动整个页面。但是现在浮动的东西仍然保持在 div 的顶部，即使它的位置是固定的。我相信这是因为浏览器看起来页面没有滚动所以它不会移动它。

容器也有相对位置设置。那么我怎样才能让它滚动呢？ jQuery是唯一的方法吗？

【问题讨论】：

你能提供一个你的代码的例子吗？ ty

标签： jquery html css fixed

【解决方案1】：

这是我的尝试：

.container{
    height:200px;
    border:1px solid red;
    margin-top:50px;
    width:100%;
    overflow-y:scroll;
}
.floaty{
    position:fixed;
    width:100%;
    height:50px;
    border:1px solid green;
    top:0px;
}

我不确定这是否是您期望的最终结果，但如果不是，请澄清。

DEMO HERE

【讨论】：

这是我目前拥有的，由于某种原因，浮动 div 在滚动时不会移动。但似乎它是我的标记或css中的东西。它应该像您的示例所示那样工作。该死的...是什么导致它无法工作..嗯
您要将“浮动”div 移动到哪里？

【解决方案2】：

如果您希望浮动 div 与内容一起滚动（不清楚是否是这种情况），您需要将其定位到容器的绝对位置。

.container{
position:relative;
height:200px;
border:1px solid #000000;
margin-top:50px;
width:300px;
overflow-y:scroll;
}
.floaty{
position:absolute;
top:0; //or wherever you want it to float
left:0;
background:#eaeaea;
width:300px;
height:50px;
}

Fiddle

【讨论】：