<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title> <style> *{ margin:0; padding:0; } body{ font-size:12px; line-height:1.7; } #menu{ position:fixed; top:100px; left:50%; margin-left:400px; width:80px; } li{ list-style:none } #content{ width:800px; margin:0 auto; padding:20px; } #content h1{ color:#03F } #content .item{ padding:20px; margin-bottom:20px; border:1px solid #999; } #content .item h2{ font-size:16px; font-weight:bold; border-bottom:2px solid #666; margin-bottom:10px; } #content .item li{ display:inline; margin-right:10px; } #content .item li a img{ width:230px; height:230px; border:none; } #menu ul li a{ display:block; margin:5px 0; font-size:16px; font-weight:bold; color:#06C; width:80px; height:50px; line-height:50px; text-decoration:none; text-align:center; } #menu ul li a:hover, #menu ul li a.current{ background:#03F; color:#999} </style> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script > $(document).ready(function(){ $(window).scroll(function(){ var top=$(document).scrollTop(); var menu=$("#menu"); var items=$('#content').find(".item"); var currentId=""; items.each(function(){ var m=$(this); var itemsTop=m.offset().top; if(top>itemsTop-200){ currentId="#"+m.attr("id") }else{ return false; } }); var currentLink=menu.find(".current"); if(currentId&¤tLink.attr("href")!=currentId){ currentLink.removeClass("current"); menu.find("[href="+currentId+"]").addClass("current"); } }); }); </script></head>
添加回答
举报
0/150
提交
取消