标签：微软 order anim des nbsp 滚动条 margin rip top
<!DOCTYPE HTML> <html> <head> <title>导航定位</title> <meta charset="utf-8"> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <script src="jquery-1.11.3.min.js"></script> </head> <style type="text/css"> * { margin:0px; padding:0px; font-family:‘微软雅黑‘; } div { height:400px; border:1px solid red; width:600px; } ul { overflow:hidden; position:fixed; top:300px; left:650px; } li { width:40px; height:40px; background:#3F883E; text-align:center; line-height:40px; color: rgb(0,255,0); ,font-size:18px; cursor:pointer; border-bottom:1px solid #fff; } li.active { width: 38px; height: 38px; margin-bottom: 1px; border: 1px solid #3F883E; background: #fff; color: rgb(255,0,0); } </style> <body> <div class="div1">段落1</div> <div class="div2">段落2</div> <div class="div3">段落3</div> <div class="div4">段落4</div> <div class="div5">段落5</div> <div class="div6">段落6</div> <div class="div7">段落7</div> <ul> <li class="li1 active">1</li> <li class="li2">2</li> <li class="li3">3</li> <li class="li4">4</li> <li class="li5">5</li> <li class="li6">6</li> <li class="li7">7</li> </ul> <script type="text/javascript"> // 匹配元素的左上角相对文档左上角的偏移 var arrOffsetTop = [ $(‘.div1‘).offset().top, $(‘.div2‘).offset().top, $(‘.div3‘).offset().top, $(‘.div4‘).offset().top, $(‘.div5‘).offset().top, $(‘.div6‘).offset().top, $(‘.div7‘).offset().top ]; var fTotalHgt = 0; for(var i=0; i<$(‘div‘).length; i++) { //返回匹配元素的外部高度，包含padding和border，不包含margin fTotalHgt += $(‘div‘).eq(i).outerHeight(); } //平均高度，用于调整滚动 var fAverageHgt = parseFloat(fTotalHgt / $(‘div‘).length); // 滚动事件(每次滚动都做一次循环判断) $(window).scroll(function() { for(var i=0; i<$(‘div‘).length; i++) { //页面滚动条的位置 if($(this).scrollTop() > arrOffsetTop[i] - fAverageHgt) { // 减去一个固定值，是定位准确点 $(‘ul li‘).eq(i).addClass(‘active‘).siblings().removeClass(‘active‘); } } }); /* 点击事件 */ $(‘ul li‘).click(function() { $(this).addClass(‘active‘).siblings().removeClass(‘active‘); //在500ms之内，将body的滚动条滚动到指定位置 $(‘body, html‘).animate({scrollTop: arrOffsetTop[$(this).index()]}, 500); }); </script> </body> </html>
标签：微软 order anim des nbsp 滚动条 margin rip top
原文地址：http://www.cnblogs.com/WebNewer/p/7070906.html
