Vị trí Div "Cố định" theo chiều dọc và "Tuyệt đối" theo chiều ngang trong một "Vị trí: Tương đối" Container Div

Question

Tôi đang tìm cách tạo một div sẽ được cố định trên trang theo chiều dọc, vì vậy nếu người dùng cuộn xuống, div vẫn ở cùng một vị trí trên trang. Tuy nhiên, nếu màn hình của người dùng bị thu hẹp theo chiều ngang, vì vậy nếu màn hình người dùng hẹp hơn trang web của tôi, cuộn sang phải hoặc trái sẽ không làm cho div di chuyển với màn hình và trong một số trường hợp, một nửa hiển thị ở cạnh màn hình hoặc tắt hoàn toàn trang.

Div này phải nằm trong "Vị trí: Tương đối" Div.

Tôi khá chắc chắn không có cách nào để gán các vị trí khác nhau cho trục khác nhau của div nhưng đây là cách tốt nhất để mô tả hiệu ứng mà tôi hy vọng đạt được.

Tôi có điều này cho đến nay, về cơ bản chỉ là một Div cố định trong Div tương đối.

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> 

Tôi cũng đã tạo ra một jsFiddle để giúp chứng minh vấn đề.

Điều này làm việc tốt cho ngành dọc, nhưng nếu bạn đổi kích thước trình duyệt web để hẹp hơn hộp màu vàng (vùng chứa) và sau đó cuộn theo chiều ngang, hộp màu xanh sẽ di chuyển với trang. Tôi hy vọng sẽ ngừng điều đó xảy ra.

Nếu không có cách nào để đạt được điều này thông qua CSS, tôi hoàn toàn hài lòng khi sử dụng JavaScript miễn là nó hoạt động với tất cả các trình duyệt hiện đại và cả IE7 và IE8. (Đó là lý do tại sao tôi đã thêm thẻ JavaScript)

Có ai có thể giúp tôi không?

Answer 1

Với JQuery, hãy sử dụng thuộc tính scrollLeft() của tài liệu! Điều này sẽ làm việc

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

Xem thêm

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

Chúc may mắn!

Sửa: Nếu bạn muốn nó để sử dụng margin-left cài sẵn của bạn thay vì một mã hóa cứng "400", sử dụng

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

Answer 2

Đây là giải pháp của tôi (được thử nghiệm trong Opera và Firefox): http://jsfiddle.net/cCH2Z/2 Bí quyết là chỉ định right: 0px;, điều này sẽ đặt hộp 0px từ biên phải của cửa sổ.