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

Question

我有一个页面：

[链接]

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

现在，我想让内部的小 div（红色的）表现得它们永远不会超出父 div，但同时，在滚动页面时，我希望它们像固定位置一样移动到父 div 内部。

我将用图表达我的意思:

[链接]

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

- user1551073

---

红色div中是否有实际内容？我认为可以通过背景图像和白色框具有透明背景和粗右侧和左侧边框来实现。 - Moin Zaman

这是不可能仅使用CSS实现的。你可以在CSS和HTML中检查MARQUEE，但我认为这并不能解决你的问题。你必须使用JavaScript或jQuery。请将它们添加到你的标签中。 - Narendra

这里讲解了如何实现这个效果：http://jqueryfordesigners.com/iphone-like-sliding-headers/ - Kristian

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

});​

目前，这只是一个实验，无法保证在任何浏览器上都能正常工作。

(所以请随意获取要点并改进它 :)

---

如评论中所述，您可以使用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;
}

- gherkins

---

谢谢，我使用这段代码遇到了麻烦，因为我不是JS专家...希望我能尽快解决它！ - user1551073