磁性div：在绝对定位div内的固定div
我有以下页面：
[链接]
该页面被设计为水平滚动，以便连续出现一系列div（黑色边框）。
现在，我内部的较小的div（红色）表现为不会超出父div，但同时在滚动页面的同时，我希望它们在父div内移动，就像它们被固定位置一样。
我会用一个图解释自己。 我希望我的div的行为如下所示：
[链接]
任何人都可以帮忙 谢谢你的时间！
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)
});
});
atm这只是一个没有任何浏览器工作保证的实验
（所以请随意抓住要点并改进它:)
正如在评论中提到的，你可以用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;
}