磁性DIV：內絕對定位的div固定的div

Question

我有以下頁面：

[LINK]

的頁面被設計爲水平滾動，從而使一系列的div（黑色邊界的）的出現在行。

現在，我內部較小的divs（紅色的）表現爲讓他們永遠不會離開父div，但同時在滾動頁面的同時，我希望它們在父div內移動，就好像它們是固定地定位。

我會用圖解釋自己。我希望我的div的行爲是這樣的：

[LINK]

任何人都可以幫助嗎？謝謝你的時間！

Answer 1

UPDATE

---

創造了一些最小/實驗jQuery插件： https://gist.github.com/3177804

，你應該能夠使用它像這樣： http://jsfiddle.net/7q3Zu/2/

下載，包括插件 https://raw.github.com/gist/3177804/556074672de8f200327d83f0146d98533c437ac3/jquery.magnetic.js 然後像這樣稱呼它是：

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

});​ 

個大氣壓，這只是沒有保單在任何瀏覽器工作的實驗

（可以隨意抓住要點，提高它:)

---

正如上文評論，你可以用Javascript做到這一點。

下面是使用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; 
}