"Position : Relative"컨테이너 디비전 내에서 Div가 "Fixed"세로 및 "Absolute"가로로 배치

Question

페이지에서 세로로 고정되는 div를 만들 수있는 방법을 찾고 있는데, 사용자가 스크롤하면 아래쪽에있는 div는 페이지의 같은 위치에 있습니다. 하지만 절대적으로 수평으로 배치해야합니다. 사용자 화면이 내 웹 페이지보다 좁 으면 오른쪽 또는 왼쪽으로 스크롤해도 div가 화면과 함께 움직이지 않으며 어떤 경우에는 화면 가장자리에 반으로 표시됩니다 또는 페이지에서 완전히 벗어납니다.

이 div는 "직위 : 상대적"사업부 내에 있어야합니다.

나는 div의 다양한 축에 다른 위치를 지정할 방법이 없다고 확신하지만, 이것이 내가 달성하기를 기대하고있는 효과를 설명하는 가장 좋은 방법입니다.

여기까지는 기본적으로 상대 사업부 내의 고정 사업부입니다.

CSS

#container { 
position:relative; 
width:700px; 
height:1000px; 
top:50px; 
left:50px; 
background-color:yellow; 
} 

#blue-box{ 
position:fixed; 
width:100px; 
height:100px; 
background-color:blue; 
margin-top:20px; 
margin-left:400px; 
{ 

HTML

<div id="container"> 
<div id="blue-box"></div> 
</div> 

나는 또한 문제를 설명하는 데 도움이 jsFiddle을 만들었습니다.

이 방법은 수직으로 잘 작동하지만 웹 브라우저의 크기를 노란색 상자 (컨테이너)보다 좁게 만든 다음 가로로 스크롤하면 파란색 상자가 페이지와 함께 이동합니다. 나는 그 일이 벌어지는 것을 막기를 바라고 있습니다.

CSS를 통해이를 수행 할 방법이 없다면 모든 최신 브라우저와 IE7 및 IE8에서 작동하는 한 JavaScript를 사용하여 매우 행복합니다. (그래서 JavaScript 태그를 추가했습니다)

나를 도와 줄 수있는 사람이 있습니까?

Answer 1

JQuery에서는 문서의 scrollLeft() 속성을 사용하십시오! 이

$(window).scroll(function(event) { 
    $("#blue-box").css("margin-left", 400-$(document).scrollLeft()); 
}); 

참조에게 일하는 것이 아니라

http://jsfiddle.net/zhQkq/9/

행운을 빕니다!

편집 : 당신이 당신의 사전 마진 왼쪽 대신 하드 코딩 된 "400"의를 사용하려면, 반드시 수평 축 컨테이너 사업부 내에서 사업부를 배치하지 않는

$(window).scroll(function(event) { 
    $("#blue-box").css("margin-left", $("#blue-box").css("margin-left")-$(document).scrollLeft()); 
}); 

Answer 2

여기 (오페라와 파이어 폭스에서 테스트) 내 솔루션입니다 : http://jsfiddle.net/cCH2Z/2 트릭은 right: 0px;를 지정하는 것입니다, 이것은 윈도우의 오른쪽 테두리에서 상자 0 픽셀 위치합니다.