Question

我有以下页面：

[LINK]

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

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

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

[LINK]

任何人都可以提供帮助？谢谢你的时间！

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

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

1 个答案: