小demo:通过jquery的scroll实现两侧广告栏

最新推荐文章于 2022-05-06 19:34:37 发布

TTLLZZHH

最新推荐文章于 2022-05-06 19:34:37 发布

阅读量155

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43797908/article/details/107280994

版权

前端专栏收录该内容

62 篇文章 0 订阅

订阅专栏

效果如下

当页面卷曲距离超过一定值时才出现两侧广告栏，这在实际中是经常用到的

<!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>