CSS Как я могу исправить один вложенный div при прокрутке другого многоуровневого / вложенного содержимого в контейнере? - PullRequest
Новая
       2

CSS Как я могу исправить один вложенный div при прокрутке другого многоуровневого / вложенного содержимого в контейнере?

2 голосов
/ 05 августа 2011

Я видел несколько интересных постов на тему элементов фиксированной позиции, но у меня есть проблема, которую я не могу решить.

У меня есть несколько вложенных элементов 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 для динамического обновления своей позиции?

Ответы [ 2 ]

2 голосов
/ 05 августа 2011

Я не могу придумать, как это сделать в CSS, но вот решение для jquery:

http://jsfiddle.net/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);
});
1 голос
/ 05 августа 2011

Я думаю, что это невозможно с чистым 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());
});
...