文档章节

jq简单爬楼效果

o
 osc_mervd488
发布于 2018/04/23 17:04
字数 273
阅读 13
收藏 0

原理是:

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>

  

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

为什么数组[idx ++] + =“a”在Java 8中增加一次idx,在Java 9和10中增加两次?

问题: For a challenge, a fellow code golfer wrote the following code : 对于挑战, 一位代码高尔夫球手 编写了以下代码 : import java.util.*;public class Main { public static ......

富含淀粉
11分钟前
11
0
这三个博弈论新趋势,正深刻影响深度强化学习道翰天琼认知智能未来机器人接口API

博弈论在现代人工智能(AI)解决方案中正扮演着至关重要的角色,深度强化学习(DRL)正是积极拥抱博弈论的头等公民。 从单智能体程序到复杂的多智能体深度强化学习环境,博弈论原理贯穿了 AI...

jackli2020
12分钟前
5
0
Web右键菜单实现思路

需要的知识 阻止事件冒泡 event.stopPropagation() 阻止默认行为 event.preventDefault() CSS定位 事件处理程序 oncontextmenu 思路 预先编写好右键菜单的DOM 在需要右键菜单的DOM元素上添加...

AioDiage
13分钟前
0
0
点击提交form

<form action="/search" id="search_form"> <input type="text" name="keywords" value="" placeholder="Furniture Handles" class="jhser" /> <span class="serBtn" onclick="docu......

子枫Eric
26分钟前
18
0
oracle查询、修改、删除、插入语句

表结构如下 create table test ( id int, xm varchar2(5), age varchar2(3) ) 内有数据格式 id xm age 1 张三 14 2 李四 20 查询语句 select * from test;#*号为返回全部字段 select id,xm f......

椰子牛奶
29分钟前
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部