css 컨테이너에서 다른 레이어/중첩 된 내용을 스크롤 할 때 하나의 중첩 된 div를 수정하는 방법은 무엇입니까?

Question

고정 게재 순위 요소에 대한 여러 가지 흥미로운 게시물을 보았지만 해결할 수없는 문제가 있습니다.

나는 here

<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; 
} 

당신이 함께 스크롤 "층"의 숫자가 볼 수 있듯이 내 예에서와 같이 스크롤 DIV 컨테이너 내부에 중첩 된 div의 번호를 가지고있다. 내가 가지고있는 문제는 컨테이너에 실제로있는 하단 상자와 관련하여 고정 된 흰색 상자 만 원한다는 것입니다.

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); 
}); 

Answer 1

은 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()); 
}); 

Answer 2

나는이 순수 CSS 불가능하다고 생각 : 내가 여기에 CSS에서이 작업을 수행 할 수있는 방법을 생각 할 수는 없지만