<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网页定位导航</title> <script id="jquery_183" type="text/javascript" class="library" src="jquery-1.11.3.js"></script> <style type="text/css"> * { margin: 0; padding: 0; } body { font-size: 12px; line-height: 1.7; /*1.7是啥意思*/ } /*左侧内容*/ li { list-style: none; } #content { width: 800px; margin: 0 auto; } #content h1 { color: #0088bb; } #content .item { padding: 20px; margin-bottom: 20px; border: 1px dotted #0088bb; } #content .item h2 { font-size: 16px; font-weight: bold; border-bottom: 2px solid #0088bb; /*h是块级元素*/ margin-bottom: 10px; } #content .item li { display: inline; /*在宽度允许时优先在从左到右按行排*/ margin-right: 10px; } #content .item li a img { width: 230px; height: 230px; /*强行设置高宽后，图片会拉伸变形*/ border: none; } /*右侧导航*/ #menu { position: fixed; /*fixed使得元素在永远固定在可视窗口的指定位置*/ top: 100px; left: 50%; margin-left: 400px; } #menu ul li a { display: block; /*?*/ margin: 5px 0; font-size: 14px; font-weight: bold; color: #333; width: 80px; height: 50px; line-height: 50px; text-decoration: none; text-align: center; /*是上下居中还是左右居中，还是4个方向居中*/ } #menu ul li a:hover, #menu ul li a.current { /*a.current*/ color: #fff; background: #0088bb; } </style> </head> <body> <!--右侧导航菜单--> <div id="menu"> <ul> <li> <a href="#item1" class="current">1F 男装</a> </li> <li> <a href="#item2">2F 女装</a> </li> <li> <a href="#item3">3F 美妆</a> </li> <li> <a href="#item4">4F 数码</a> </li> <li> <a href="#item5">5F 母婴</a> </li> </ul> </div> <!--左侧内容--> <div style="text-align:center;font-weight:bold;font-size:18px;">实现了一个右侧的导航栏，可根据页面滚动即时定位(建议全屏查看)</div> <div id="content"> <h1>Demo购物网</h1> <div id="item1" class="item"> <h2>1F 男装</h2> <ul> <li> <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/269/icmjjofl/1F.jpg" alt="" /></a> </li> <!--alt属性是啥--> <li> <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/269/icmjjofl/1F.jpg" alt="" /></a> </li> <li> <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/269/icmjjofl/1F.jpg" alt="" /></a> </li> <li> <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/269/icmjjofl/1F.jpg" alt="" /></a> </li> <li> <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/269/icmjjofl/1F.jpg" alt="" /></a> </li> <li> <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/269/icmjjofl/1F.jpg" alt="" /></a> </li> <li> <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/269/icmjjofl/1F.jpg" alt="" /></a> </li> <li> <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/269/icmjjofl/1F.jpg" alt="" /></a> </li> <li> <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/269/icmjjofl/1F.jpg" alt="" /></a> </li> </ul> </div> <div id="item2" class="item"> <h2>2F 女装</h2> <ul> <li> <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/269/icmjjofl/2F.jpg" alt="" /></a> </li> <li> <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/269/icmjjofl/2F.jpg" alt="" /></a> </li> <li> <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/269/icmjjofl/2F.jpg" alt="" /></a> </li> <li> <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/269/icmjjofl/2F.jpg" alt="" /></a> </li> <li> <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/269/icmjjofl/2F.jpg" alt="" /></a> </li> <li> <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/269/icmjjofl/2F.jpg" alt="" /></a> </li> <li> <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/269/icmjjofl/2F.jpg" alt="" /></a> </li> <li> <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/269/icmjjofl/2F.jpg" alt="" /></a> </li> <li> <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/269/icmjjofl/2F.jpg" alt="" /></a> </li> </ul> </div> <div id="item3" class="item"> <h2>3F 美装</h2> <ul> <li> <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/269/icmjjofl/3F.jpg" alt="" /></a> </li> <li> <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/269/icmjjofl/3F.jpg" alt="" /></a> </li> <li> <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/269/icmjjofl/3F.jpg" alt="" /></a> </li> <li> <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/269/icmjjofl/3F.jpg" alt="" /></a> </li> <li> <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/269/icmjjofl/3F.jpg" alt="" /></a> </li> <li> <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/269/icmjjofl/3F.jpg" alt="" /></a> </li> <li> <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/269/icmjjofl/3F.jpg" alt="" /></a> </li> <li> <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/269/icmjjofl/3F.jpg" alt="" /></a> </li> <li> <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/269/icmjjofl/3F.jpg" alt="" /></a> </li> </ul> </div> <div id="item4" class="item"> <h2>4F 数码</h2> <ul> <li> <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/269/icmjjofl/4F.jpg" alt="" /></a> </li> <li> <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/269/icmjjofl/4F.jpg" alt="" /></a> </li> <li> <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/269/icmjjofl/4F.jpg" alt="" /></a> </li> <li> <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/269/icmjjofl/4F.jpg" alt="" /></a> </li> <li> <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/269/icmjjofl/4F.jpg" alt="" /></a> </li> <li> <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/269/icmjjofl/4F.jpg" alt="" /></a> </li> <li> <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/269/icmjjofl/4F.jpg" alt="" /></a> </li> <li> <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/269/icmjjofl/4F.jpg" alt="" /></a> </li> <li> <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/269/icmjjofl/4F.jpg" alt="" /></a> </li> </ul> </div> <div id="item5" class="item"> <h2>5F 母婴</h2> <ul> <li> <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/269/icmjjofl/5F.jpg" alt="" /></a> </li> <li> <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/269/icmjjofl/5F.jpg" alt="" /></a> </li> <li> <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/269/icmjjofl/5F.jpg" alt="" /></a> </li> <li> <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/269/icmjjofl/5F.jpg" alt="" /></a> </li> <li> <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/269/icmjjofl/5F.jpg" alt="" /></a> </li> <li> <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/269/icmjjofl/5F.jpg" alt="" /></a> </li> <li> <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/269/icmjjofl/5F.jpg" alt="" /></a> </li> <li> <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/269/icmjjofl/5F.jpg" alt="" /></a> </li> <li> <a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/269/icmjjofl/5F.jpg" alt="" /></a> </li> </ul> </div> </div> <script type="text/javascript"> $(document).ready(function() { //监听滚动条事件 $(window).scroll(function() { //也可以用:$(window).on('scroll',function(){}) var top = $(document).scrollTop(); var menu = $('#menu'); var items = $('#content').find('.item') //和$('#content .item')以及('#content>.item),$('.item')的区别？先获取id效率高 var currentId = ''; items.each(function() { var m = $(this); var itemTop = m.offset().top; //遍历返回了每个item的top if(top > itemTop - 200) { currentId = '#' + m.attr('id'); console.log(itemTop); } else { return false //滚动条高度<itemn的高度时，跳出循环，后面itemn的高度不会进入遍历，提高了页面效率 } }) //给相应楼层设置current，并且取消其他的current //currentLink表示当前的楼层 var currentLink = menu.find('.current'); //判断currentId是否为空，比如滚动条距离小于第一层;第二个条件如果当前currentId和currentlink对应的是同一楼层，就不用再做变更 if(currentId && currentLink.attr('href') != currentId) { currentLink.removeClass('current'); menu.find('[href=' + currentId + ']').addClass('current'); } }); }) </script> </body> </html>