Question

所以当用户向下滚动div（注意div）时，我想要一个div来滚动。这是html：

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

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

容器也有位置相对集。那我怎么能让它滚动？是jQuery唯一的方式吗？

Answer 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

Answer 2

如果你想让floaty 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

在具有滚动y的div顶部浮动div

2 个答案: