首页 > 技术文章 > 页面滚动条位置触发事件

xzybk 2019-08-28 10:01 原文

网站实现页面滚动相应位置后广告图片位置固定不变
JS部分:
$(window).scroll(function(){
var $scroll=$(document).scrollTop();
console.log($scroll);
if($scroll>2300){
$("div.mRs").addClass("ac");
$("div.mRse").addClass("ac");
}else{
$("div.mRs").removeClass("ac");
$("div.mRse").removeClass("ac");
}
HTML部分:
<!-- 定位浮动广告 1-->
<div class="mRs">
<a href="#"><img src="../../img/test.jpg" alt=""></a>
</div>
<!-- 定位浮动广告 2-->
<div class="mRse">
<a href="#"><img src="../../img/test.jpg" alt=""></a>
</div>
CSS部分:
.main .mainRight .mRs{
width: 265px;
height: 220px;
margin-top: 20px;
}
.main .mainRight .mRs.ac{
position: fixed;
top: 0;
}
.main .mainRight .mRse{
width: 265px;
height: 220px;
margin-top: 15px;
}
.main .mainRight .mRse.ac{
position: fixed;
top: 240px;
}

推荐阅读