css 当滚动容器中的其他分层/嵌套内容时，如何修复单个嵌套 div？

Question

我看过许多关于固定位置元素主题的有趣帖子，但我有一个无法解决的问题。

我在滚动 div 容器内有许多嵌套的 div，如我的示例 此处

<div id="bottom" class="bottombox">
<div id="first" class="firstbox">
<div id="second" class="secondbox">
<div id="third" class="thirdbox">
<div id="top" class="topbox">
</div>
</div>
</div>
</div>


.bottombox
{
margin-top:0px;
margin-left:0px;
Position: absolute;
width: 200px;
height:200px;
overflow:auto;
background-color: darkblue;
}

.firstbox
{
margin-top:10px;
margin-left:10px;
width: 700px;
height:50px;
background-color: lightblue;
}

.secondbox
{
margin-top:20px;
margin-left:10px;
Position: absolute;
width: 700px;
height:50px;
background-color: brown;

}


.thirdbox
{
margin-top:30px;
margin-left:10px;
width: 100px;
height:100px;
/*Position: fixed;*/    
background-color: white;
}


.topbox
{
margin-top:40px;
margin-left:10px;
width: 700px;
height:500px;
background-color: darkgray;
}

如您所见是许多一起滚动的“层”。我遇到的问题是，我只想让白色盒子相对于底部盒子保持固定，底部盒子实际上是容器。

这可以用 CSS 来完成吗？如果没有，那么Jquery动态更新它的位置呢？

Answer 1

我想不出任何方法可以在 CSS 中执行此操作，但这里有一个 jquery 解决方案：

http://jsfiddle。网/drHam/7/

$("#bottom").scroll(function(){
    var $this = $(this);
    $(".thirdbox").css("top",$this.scrollTop())
                  .css("left",$this.scrollLeft());            

    $(".topbox").css("top", $this.scrollTop()*-1)
                .css("left",$this.scrollLeft()*-1);
});

Answer 2

我认为纯 CSS 是不可能实现的。

我用jquery制定了一个解决方案，请参阅更新的小提琴：

var bottom = $("#bottom");
var third = $("#third");
var top = $("#top");

bottom.scroll(function() {
    third.css("left", bottom.scrollLeft());
    third.css("top", bottom.scrollTop());
    top.css("left", -bottom.scrollLeft());
    top.css("top", -bottom.scrollTop());
});