gpt4 book ai didi

javascript - 磁性分区 : fixed div inside absolute positioned div

转载 作者:太空狗 更新时间:2023-10-29 14:19:56 25 4
gpt4 key购买 nike

我有以下页面:

[LINK]

页面被设计为水平滚动,因此一系列 div(黑色边框的)出现在一行中。

现在,我将较小的 div(红色的)设置为永远不会超出父 div,但与此同时,在滚动页面时,我希望它们在父 div 内移动,就像它们是固定的一样-定位。

我会用图表来解释。我希望我的 div 表现得像这样:

[LINK]

有人可以帮忙吗?感谢您的宝贵时间!

最佳答案

更新


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

关于javascript - 磁性分区 : fixed div inside absolute positioned div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11647593/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com