磁性div：固定div内部绝对定位div

Question

我有以下页面：

[链接]

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

现在，我内部的较小的div（红色的）表现得如此，以至于它们永远不会超出父div，但同时，在滚动页面的同时，我希望它们在父div中移动，就像它们是固定位置一样。

我将用图解释自己。 我希望我的div表现得像这样：

[链接]

有人可以帮忙吗？ 谢谢你的时间！

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

});​

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;
}