div từ: div cố định bên trong div vị trí tuyệt đối

Question

Tôi có trang sau:

[LINK]

Các trang được thiết kế để cuộn theo chiều ngang, do đó một loạt các divs (đen giáp những người thân) xuất hiện trong một hàng.

Bây giờ, các div nhỏ bên trong (màu đỏ) hoạt động để chúng không bao giờ ra ngoài div cha nhưng đồng thời, trong khi cuộn trang, tôi muốn chúng di chuyển bên trong div cha giống như chúng cố định vị trí.

Tôi sẽ giải thích cho mình bằng sơ đồ. Tôi muốn divs tôi cư xử như thế này:

[LINK]

Bất cứ ai có thể giúp đỡ? Cảm ơn vì đã dành thời gian cho tôi!

Answer 1

CẬP NHẬT

---

tạo ra một số tối thiểu/thực nghiệm jQuery plugin: https://gist.github.com/3177804

bạn sẽ có thể sử dụng nó như thế này: http://jsfiddle.net/7q3Zu/2/

tải về và bao gồm các plugin https://raw.github.com/gist/3177804/556074672de8f200327d83f0146d98533c437ac3/jquery.magnetic.js rồi gọi nó như thứ là:

$(function() { 

    $('.container').magnetic({ //call it on some scrollable container 
     selector: '.object', //what to fix 
     left: 180,    //when to fix (px) 
     right: 500    //when to unfix (px) 
    }); 

});​ 

atm đây chỉ là một thử nghiệm với không bảo đảm làm việc trong bất kỳ trình duyệt

(vì vậy cảm thấy tự do để lấy ý chính và cải thiện nó :)

---

Như đã đề cập trong các ý kiến, bạn có thể làm điều này với Javascript.

Dưới đây là ví dụ sử dụng sáng jQuery:

http://jsfiddle.net/7q3Zu/

HTML

​<div class="container"> 
<div class="object"></div> 
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

JS

$(function() { 
    var obj = $('.object'); 
    $(document).on('scroll', function() { 

     var offset = $(this).scrollLeft() 
     //fix the position a some point  
     if (offset >= 200) { 
      obj.css('position', 'fixed').css('left', '20px'); 
     } 
     //..and unfix it later  
     if (offset >= 500) { 
      obj.css('position', 'absolute').css('left', '500px'); 
     } 

    }); 
});​ 

CSS

.container{ 
    width: 4000px; 
    padding: 20px; 
    margin: 20px; 
    border: 1px solid #ccc; 
    height: 400px; 
    position: relative; 
} 
.object{ 
    position: absolute; 
    height: 400px; 
    width :100px; 
    background: red; 
    left: 200px; 
}