jq简单爬楼效果

最新推荐文章于 2021-08-11 22:25:15 发布

badiu_30394251

最新推荐文章于 2021-08-11 22:25:15 发布

阅读量130

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yjgbk/p/8920284.html

版权

原理是：

1，先each循环，获取到每个元素距离文档顶部的距离

2，然后用window的scroll事件获取元素中滚动条的垂直偏移

3，然后把俩者进行比较

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" ></script>
	</head>
	<body>
		<style type="text/css">
			*{margin: 0;}
			.main div{
				width: 100%;
				height: 800px;
				color: #fff;
				background: #007FFF;
			}
			.main div:nth-child(2n){
				height: 1000px;
				background: #00DD1C;
			}
			.right{
				position: fixed;
				right: 20px;
				bottom: 100px;
			}
			.right a{
				display: block;
				margin: 5px;
				width:20px;
				height: 20px;
				border-radius: 50%;
				background: #000;
			}
			.right a.active{
				background: #2A6496;
			}
		</style>
		<div class="main">
			<div class="one">111</div>
			<div class="one">222</div>
			<div class="one">333</div>
			<div class="one">444</div>
			<div class="one">555</div>
		</div>
		<div class="right">
			<a class="active" href="javascript:;"></a>
			<a href="javascript:;"></a>
			<a href="javascript:;"></a>
			<a href="javascript:;"></a>
			<a href="javascript:;"></a>
		</div>
		<script>
			$(function(){
				
				$(".main div").each(function(i,index){
					var that=$(this);
					//获取每个元素的距离文档顶部的高度
					var windowTop = $(".main div").eq(i).offset().top -100
					
					$(window).scroll(function(){
						//console.log($(this).scrollTop(),windowTop)
						//用当前滚动文档的高度和获取元素文档的高度比较
						if($(this).scrollTop() >= windowTop ){
							$(".right a").eq(i).addClass('active').siblings().removeClass('active');
						}
					})
				})
				
			})
		</script>
	</body>
</html>

转载于:https://www.cnblogs.com/yjgbk/p/8920284.html

badiu_30394251

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq简单爬楼效果

原理是：1，先each循环，获取到每个元素距离文档顶部的距离2，然后用window的scroll事件获取元素中滚动条的垂直偏移3，然后把俩者进行比较<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> ...
复制链接

扫一扫