鼠标滚动监听并且给锚点加class类

JS部分:

$(function(){
	
       $(window).scroll(function(){
 			//为页面添加页面滚动监听事件
                  var wst =  $(window).scrollTop() //滚动条距离顶端值
				 for (i=1; i<6; i++){             //加循环
				  if($("#a"+i).offset().top<=wst){ //判断滚动条位置
					 $('#nav a').removeClass("c"); //清除c类
					 $("#a"+i+i).addClass("c");	//给当前导航加c类
					 }
				 }
				 
	  })
	   $('#nav a').click(function(){
		$('#nav a').removeClass("c");
		$(this).addClass("c");
		});
});

HTML部分:

<body>
<div id="nav">
<a id="a11" href="#a1" class="c">书籍目录</a>
<a id="a22" href="#a2">作品试读</a>
<a id="a33" href="#a3">购买须知</a>
<a id="a44" href="#a4">注意事项</a>
<a id="a55" href="#a5">用户点评</a>
</div>
<br /><br />
页面结构如下:
<div id="a1">测试</div>
<div id="a2">测试</div>
<div id="a3">测试</div>
<div id="a4">测试</div>
<div id="a5">测试</div>
</body>

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值