javascript - 磁性 div：在绝对定位的 div 内固定 div

Question

我有以下页面：

[关联]

该页面设计为水平滚动，因此一系列 div（黑色边框的）出现在一行中。

现在，我将较小的 div（红色）放在里面，这样它们就不会超出父 div，但同时，在滚动页面时，我希望它们像固定位置一样在父 div 内移动。

我会用一张图来解释自己。我希望我的 div 表现得像这样：

[关联]

任何人都可以帮忙吗？谢谢你的时间！

Answer 1

更新

---

创建了一些最小/实验性的 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;
}