scroll滚动时对菜单中的 li 添加 class_html-js-css

概述scroll滚动时对菜单中的 li 添加 class

下面是内存溢出 jb51.cc 通过网络收集整理的代码片段。

内存溢出小编现在分享给大家，也给大家做个参考。

<HTML lang="en"><head>  <Meta charset="utf-8">  <Title>scroll demo</Title>  <style>  .sub_menu_frame {    position: fixed;top: 50px;wIDth: 280;height:400px;right:20px;overflow:auto;background: rgb(221,221,255);color: red;  }  h2 {    color: green;	margin-top:350px;  }  span {    color: red;    display: none;  }  .avtive{	  background: rgb(211,211,211);color: rgb(88,88,88);border: 1px solID rgb(190,190,190);}  </style>  <script src="http://code.jquery.com/jquery-1.9.1.Js"></script></head><body> <div >					<ul >						<li class='icbtn'><a href="#h1">11111111111</a></li>                        <li class='icbtn'><a href="#h2">222222222222222</a></li>                        <li class='icbtn'><a href="#h3">333333333</a></li>                        <li class='icbtn'><a href="#h4">444444444444</a></li>                        <li class='icbtn'><a href="#h5">555555555555</a></li>                        <li class='icbtn'><a href="#h6">66666666666</a></li>                        <li class='icbtn'><a href="#h7">77777777777777</a></li>                        <li class='icbtn'><a href="#h8">88888888888888</a></li>                        <li class='icbtn'><a href="#h9">9999999999999</a></li>					</ul>				</div></div><h2 ID='h1'>	hello1</h2> <h2 ID='h2'>	hello2</h2 ><h2 ID='h3'>	hello3</h2><h2 ID='h4'>	hello4</h2><h2 ID='h5'>	hello5</h2><h2 ID='h6'>	hello6</h2></h2><h2 ID='h7'>	hello7</h2></h2><h2 ID='h8'>	hello8</h2></h2><h2 ID='h9'>	hello9</h2><script>$(function(){		$(".sub_menu li a").click(function(){		$(".sub_menu li a").removeClass('avtive');		$(this).addClass('avtive');	});	});$( window ).scroll(function() {	var hh=$( 'h2' );	var sctop = $(this).scrolltop();	hh.each(function(){			var park=$(this).offset().top-sctop;		if(park<350 && park>0)			{			$(".sub_menu li a").removeClass('avtive');			var inde=$(this).index()-1;			$(".sub_menu li:eq("+inde+") a").addClass('avtive');				console.log($(this).index()+$(this).HTML());			}	});});</script> </body></HTML>

以上是内存溢出(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

总结

以上是内存溢出为你收集整理的scroll滚动时对菜单中的 li 添加 class全部内容，希望文章能够帮你解决scroll滚动时对菜单中的 li 添加 class所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1097148.html