gpt4 book ai didi

javascript - 如何让div float 在滚动条上?

转载 作者:行者123 更新时间:2023-12-02 16:01:12 25 4
gpt4 key购买 nike

当我滚动时,我尝试 float 2 个 div,但只会在左侧 div 的顶部显示右侧 div。知道如何解决这个问题吗?

HTML

<body>
<div id="scroller-left">Some controls left</div>
<div id="scroller-right">Some controls right</div>
</body>

CSS

body{
height:2000px;
width: 100%;
margin:0;
padding:0;
}
#scroller-left{
float: left;
background:#CCC;
}
#scroller-right{
float: right;
background:#CCC;
}

JavaScript

$(window).load(function(){
$(window).scroll(function(){
if($(window).scrollTop()>10){
$('#scroller-left').css('position', 'fixed');
$('#scroller-left').css('top', 0);
$('#scroller-right').css('position', 'fixed');
$('#scroller-right').css('top', 0);
} else {
$('#scroller-left').css('position', 'relative');
$('#scroller-left').css('top', 0);
$('#scroller-right').css('position', 'relative');
$('#scroller-right').css('top', 0);
}
});
});

Jsfiddle
https://jsfiddle.net/q0fa81hf

谢谢。

最佳答案

我认为,这种情况下不需要JS解决方案。我的解决方案仅 CSS:

body {
height:2000px;
width: 100%;
margin:0;
padding:0;
}

#scroller-left{
position: fixed;
left: 0;
background:#CCC;
}

#scroller-right{
position: fixed;
right: 0;
background:#CCC;
}

JSFiddle

关于javascript - 如何让div float 在滚动条上?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31184298/

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