效果如下
当页面卷曲距离超过一定值时才出现两侧广告栏，这在实际中是经常用到的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.left img{
position: fixed;
left: 0;
top:300px;
width: 200px;
height: 400px;
}
.right img{
position: fixed;
right: 0;
top:300px;
width: 200px;
height: 400px;
}
</style>
<script src="./jquery-3.5.0/jquery-3.5.0.min.js"></script>
<script>
$(function(){
$(window).scroll(function(){
var top=$(this).scrollTop();
console.log(top);
if(top>=300){
$(".left").show();
$(".right").show(1000,function(){
});
}else{
$(".left").hide(1000,function(){
});
$(".right").hide();
}
});
});
</script>
</head>
<body>
<div class="left"><img src="./images/left.jpg" alt=""></div>
<div class="right"><img src="./images/right.jpg" ></div>
<br>
<br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br><br><br><br><br><br>
<br>
</body>
</html>