gpt4 book ai didi

javascript - 滚动时将一个 div 粘贴到一个 div

转载 作者:行者123 更新时间:2023-11-28 00:03:03 25 4
gpt4 key购买 nike

请检查 fiddle : http://jsfiddle.net/howtoplease/f8sXN/4/

我想在滚动时通过 jQuery 使 .float 粘到 .right

HTML代码

<div class="main">
<div class="float">
float
</div>
<div class="right">
Stick float to me
</div>
</div>

CSS 代码

.main{
margin-bottom:30px;

}
.float{
background: #333333;
color: #FFFFFF;
float: left;
height: 40px;
margin-right: 20px;
width: 40px;
}
.right{
background: none repeat scroll 0 0 #AAAAAA;
height: 245px;
overflow: hidden;
}

最佳答案

应该这样做:

$(window).scroll(function(){
var st = $(this).scrollTop();

$('.main').each(function(){
var $this = $(this),
offset = $this.offset(),
h = $this.height(),
$float = $this.find('.float'),
floatH = $float.height();

if(st >= offset.top && st < offset.top + h - floatH){
$float.css({'position':'fixed'});
}else{
$float.css({'position':'absolute'});
}
})
});

CSS:

.main{
margin-bottom:30px;
/* set main to realtive so float won't move out bounds */
position:relative;
}

.float{
background: #333333;
color: #FFFFFF;
height: 40px;
width: 40px;
/* set top to 0 and position to absolute*/
top:0;
position:absolute;
}

.right{
background: none repeat scroll 0 0 #AAAAAA;
height: 245px;
overflow: hidden;
/* the float width:40 plus its margin-right:20 that I removed*/
margin-left:60px;
}

我已经更新了答案以解决 '.right' 上的问题 — 保持相同的宽度和位置。

类似于@UDB 解决方案,但在该方法(更改 'margin-top')上我注意到 '.float' 有时会晃动,尤其是在长滚动和滚动时很快就会发生这种情况: enter image description here

在我的新解决方案中,我们只更改了 position 属性,所以到目前为止没有问题。

查看此 jsfiddle .

也感谢@Zeaklous 和@UDB 的想法。

关于javascript - 滚动时将一个 div 粘贴到一个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20277694/

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