jQuery中的滚轮事件

最新推荐文章于 2024-07-30 03:35:30 发布

一个人的世界、

最新推荐文章于 2024-07-30 03:35:30 发布

阅读量3.5k

点赞数

本文链接：https://blog.csdn.net/weixin_43727538/article/details/89058974

版权

获取页面滚动距离
$(document).scrollTop();
$(document).scrollLeft();

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		ul{
			list-style: none;
		}
		li{
			float: left;
			border: 1px solid red;
			width: 198px;
			height: 50px;
			text-align: center;
			line-height: 50px;
		}
		.div_1{
			height: 3000px;
		}
		.div_01{
			width: 1000px;
			height: 50px;
			border: 1px solid red;
			margin: auto;
			left: 260px;
		}
	</style>
	<script type="text/javascript">
		$(function(){
			$(window).scroll(function(){
					if($(document).scrollTop()>1000){
						$('.div_01').css('position','fixed');
					}
					if($(document).scrollTop()<600){
						$('.div_01').css('position','initial');
					}
				})
		})
	</script>
	<body>
		<div class="div_1">
			<div class="div_01">
				<ul>
					<li>首页</li>
					<li>首页</li>
					<li>首页</li>
					<li>首页</li>
					<li>首页</li>
				</ul>
			</div>
		</div>
	</body>
</html>