在父项 div 的相对两侧浮动两个 类
Float two classes on opposite sides within a parent div
我正在制作一个网站,其中有两个广告在相对的两侧浮动,在父广告中左右浮动 div。这非常有效,直到我放入 jQuery 以在滚动时固定它们的位置。左侧对象正常工作,但右侧对象在滚动时突然开始向左浮动。
我做错了什么?
html:
<div id="wrapper">
<div class="left_ad"></div>
<div class="right_ad"></div>
</div>
css:
#wrapper{
width:100%;
height: 100%;
margin: 0px auto;
display: inline-block;
}
.left_ad{
width: 135px;
height: 500px;
background-color: gray;
display: inline-block;
}
.right_ad{
width: 135px;
height: 500px;
background-color: gray;
display: inline-block;
float: right;
}
jQuery(x2,我也对 .right_ad 使用了相同的代码):
<script>
var fixmeTop = $('.left_ad').offset().top;
$(window).scroll(function() {
var currentScroll = $(window).scrollTop();
if (currentScroll >= fixmeTop) {
$('.left_ad').css({
position: 'fixed',
top: '0',
left: '0'
});
} else {
$('.left_ad').css({
position: 'static'
});
}
});
</script>
如果您对右侧使用相同的代码,是否记得将左侧:'0' 更改为右侧?
只需为 .right_ad
创建一个 if statement
并使用它:
$('.right_ad').css({
position: 'fixed',
top: '0',
right: '0'
});
请注意 right : '0'
我正在制作一个网站,其中有两个广告在相对的两侧浮动,在父广告中左右浮动 div。这非常有效,直到我放入 jQuery 以在滚动时固定它们的位置。左侧对象正常工作,但右侧对象在滚动时突然开始向左浮动。 我做错了什么?
html:
<div id="wrapper">
<div class="left_ad"></div>
<div class="right_ad"></div>
</div>
css:
#wrapper{
width:100%;
height: 100%;
margin: 0px auto;
display: inline-block;
}
.left_ad{
width: 135px;
height: 500px;
background-color: gray;
display: inline-block;
}
.right_ad{
width: 135px;
height: 500px;
background-color: gray;
display: inline-block;
float: right;
}
jQuery(x2,我也对 .right_ad 使用了相同的代码):
<script>
var fixmeTop = $('.left_ad').offset().top;
$(window).scroll(function() {
var currentScroll = $(window).scrollTop();
if (currentScroll >= fixmeTop) {
$('.left_ad').css({
position: 'fixed',
top: '0',
left: '0'
});
} else {
$('.left_ad').css({
position: 'static'
});
}
});
</script>
如果您对右侧使用相同的代码,是否记得将左侧:'0' 更改为右侧?
只需为 .right_ad
创建一个 if statement
并使用它:
$('.right_ad').css({
position: 'fixed',
top: '0',
right: '0'
});
请注意 right : '0'