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

最新推荐文章于 2024-01-12 15:31:13 发布

sloafer

最新推荐文章于 2024-01-12 15:31:13 发布

阅读量2.2k

点赞数 1

分类专栏： web前端文章标签：滚动监听锚点

web前端专栏收录该内容

54 篇文章 1 订阅

订阅专栏

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>