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

Question

我有以下页面:

[链接]

该页面设计为水平滚动,以便一系列div(黑色边框)出现在一行中.

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

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

[链接]

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

Answer 1

更新

\n\n\n\n

创建了一些最小/实验性 jQuery 插件：\n https://gist.github.com/3177804

\n\n

你应该能够像这样使用它：\n http://jsfiddle.net/7q3Zu/2/

\n\n

下载并包含插件\n https://raw.github.com/gist/3177804/556074672de8f200327d83f0146d98533c437ac3/jquery.magic.js \n然后像这样调用它：

\n\n

$(function() {\n\n    $(\'.container\').magnetic({  //call it on some scrollable container\n        selector: \'.object\',    //what to fix\n        left: 180,              //when to fix (px)\n        right: 500              //when to unfix (px)\n    });\n\n});\xe2\x80\x8b\n

\n\n

atm 这只是一个实验，不保证在任何浏览器中工作

\n\n

（所以请随意抓住要点并改进它：）

\n\n\n\n

正如评论中提到的，您可以使用 Javascript 来完成此操作。

\n\n

这是使用jQuery 的示例：

\n\n

http://jsfiddle.net/7q3Zu/

\n\n

超文本标记语言

\n\n

\xe2\x80\x8b<div class="container">\n <div class="object"></div>\n</div>\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\n

\n\n

JS

\n\n

$(function() {\n    var obj = $(\'.object\');\n    $(document).on(\'scroll\', function() {\n\n        var offset = $(this).scrollLeft()\n        //fix the position a some point    \n        if (offset >= 200) {\n            obj.css(\'position\', \'fixed\').css(\'left\', \'20px\');\n        }\n        //..and unfix it later       \n        if (offset >= 500) {\n            obj.css(\'position\', \'absolute\').css(\'left\', \'500px\');\n        }\n\n    });\n});\xe2\x80\x8b\n

\n\n

CSS

\n\n

.container{ \n    width: 4000px; \n   padding: 20px; \n    margin: 20px;\n    border: 1px solid #ccc;\n    height: 400px;\n    position: relative;\n}\n.object{\n  position: absolute;\n    height: 400px;\n    width :100px;\n    background: red;\n    left: 200px;\n}\n

\n