废话不多说，先上图，查看效果！
代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>网页定位导航效果</title> <link rel="stylesheet" href=""> <style> * { margin:0; padding:0; } body { font-size:12px; line-height:1.7; } li { list-style: none; } /*左侧样式*/ #container { width: 828px; height: auto; margin: 0 auto; padding:20px; } #container h2 { color: #0088bb; } #container .item { padding: 20px; margin-bottom: 20px; border: 1px dotted #0088bb; text-align: center; } #container .item h2 { font-size: 16px; font-weight: 700; margin-bottom: 10px; border-bottom: 2px solid #0088bb; text-align: left; } #container .item li { display:inline; } #container .item li a img { width:252px; height: 398px; border: none; } /*右侧导航样式*/ #menu { position: fixed; top: 100px; left: 50%; margin-left: 414px; } #menu ul li a { display: block; width: 80px; text-align:center; font-size:14px; font-weight: 700; height: 30px; line-height: 30px; color: #333; margin-bottom: 10px; text-decoration: none; } #menu ul li a:hover, #menu ul li a.current { background: #0088bb; color: #fff; } </style> <!-- 引入jquery百度CDN库 --> <script type='text/javascript' src='http://libs.baidu.com/jquery/1.10.2/jquery.min.js'></script> <script> $(function () { /*滚动条事件监听*/ //当滚动条发生滚动的时候，监听滚动条 $(window).scroll(function () { //监听滚动条滚动的距离 var sTop = $(window).scrollTop(); //获取右侧导航操作 var rMenu = $("#menu"); //获取所有“楼层” var items = $("#container").find('.item'); //判断每一层楼的高度{计算每个Item距离窗口顶部的绝对高度} var curId = ''; items.each(function (i) { var _this = $(this); var itemTop = _this.offset().top; if (sTop > itemTop-160) { curId = '#'+_this.attr('id'); } else { return false; } }) // console.log(curId); curId = curId == '' ? '#item1' : curId; //如果到达对应楼层，那么样式.current转变到该对应导航，并且其他导航删除.current rMenu.find('a').removeClass('current').parents('ul').find("a[href='"+curId+"']").addClass('current'); }) }) </script> </head> <body> <div id="menu"> <ul> <li class="item"><a href="#item1" class='current'>1F 男装</a></li> <li class="item"><a href="#item2">2F 女装</a></li> <li class="item"><a href="#item3">3F 童装</a></li> <li class="item"><a href="#item4">4F 运动</a></li> <li class="item"><a href="#item5">5F 电器</a></li> </ul> </div> <div id="container"> <h1>地沟油购物网</h1> <div id="item1" class="item"> <h2>1F 男装</h2> <ul> <li><a href="#"><img src="bs_record_img/1.jpg" width='250' height='398' alt="潇洒男装" /></a></li> <li><a href="#"><img src="bs_record_img/1.jpg" width='250' height='398' alt="潇洒男装" /></a></li> <li><a href="#"><img src="bs_record_img/1.jpg" width='250' height='398' alt="潇洒男装" /></a></li> <li><a href="#"><img src="bs_record_img/1.jpg" width='250' height='398' alt="潇洒男装" /></a></li> <li><a href="#"><img src="bs_record_img/1.jpg" width='250' height='398' alt="潇洒男装" /></a></li> <li><a href="#"><img src="bs_record_img/1.jpg" width='250' height='398' alt="潇洒男装" /></a></li> <li><a href="#"><img src="bs_record_img/1.jpg" width='250' height='398' alt="潇洒男装" /></a></li> <li><a href="#"><img src="bs_record_img/1.jpg" width='250' height='398' alt="潇洒男装" /></a></li> <li><a href="#"><img src="bs_record_img/1.jpg" width='250' height='398' alt="潇洒男装" /></a></li> </ul> </div> <div id="item2" class="item"> <h2>2F 女装</h2> <ul> <li><a href="#"><img src="bs_record_img/2.jpg" width='250' height='398' alt="精品女装" /></a></li> <li><a href="#"><img src="bs_record_img/2.jpg" width='250' height='398' alt="精品女装" /></a></li> <li><a href="#"><img src="bs_record_img/2.jpg" width='250' height='398' alt="精品女装" /></a></li> <li><a href="#"><img src="bs_record_img/2.jpg" width='250' height='398' alt="精品女装" /></a></li> <li><a href="#"><img src="bs_record_img/2.jpg" width='250' height='398' alt="精品女装" /></a></li> <li><a href="#"><img src="bs_record_img/2.jpg" width='250' height='398' alt="精品女装" /></a></li> <li><a href="#"><img src="bs_record_img/2.jpg" width='250' height='398' alt="精品女装" /></a></li> <li><a href="#"><img src="bs_record_img/2.jpg" width='250' height='398' alt="精品女装" /></a></li> <li><a href="#"><img src="bs_record_img/2.jpg" width='250' height='398' alt="精品女装" /></a></li> </ul> </div> <div id="item3" class="item"> <h2>3F 童装装</h2> <ul> <li><a href="#"><img src="bs_record_img/3.jpg" width='250' height='398' alt="可爱童装" /></a></li> <li><a href="#"><img src="bs_record_img/3.jpg" width='250' height='398' alt="可爱童装" /></a></li> <li><a href="#"><img src="bs_record_img/3.jpg" width='250' height='398' alt="可爱童装" /></a></li> <li><a href="#"><img src="bs_record_img/3.jpg" width='250' height='398' alt="可爱童装" /></a></li> <li><a href="#"><img src="bs_record_img/3.jpg" width='250' height='398' alt="可爱童装" /></a></li> <li><a href="#"><img src="bs_record_img/3.jpg" width='250' height='398' alt="可爱童装" /></a></li> <li><a href="#"><img src="bs_record_img/3.jpg" width='250' height='398' alt="可爱童装" /></a></li> <li><a href="#"><img src="bs_record_img/3.jpg" width='250' height='398' alt="可爱童装" /></a></li> <li><a href="#"><img src="bs_record_img/3.jpg" width='250' height='398' alt="可爱童装" /></a></li> </ul> </div> <div id="item4" class="item"> <h2>4F 运动</h2> <ul> <li><a href="#"><img src="bs_record_img/4.jpg" width='250' height='398' alt="运动品牌" /></a></li> <li><a href="#"><img src="bs_record_img/4.jpg" width='250' height='398' alt="运动品牌" /></a></li> <li><a href="#"><img src="bs_record_img/4.jpg" width='250' height='398' alt="运动品牌" /></a></li> <li><a href="#"><img src="bs_record_img/4.jpg" width='250' height='398' alt="运动品牌" /></a></li> <li><a href="#"><img src="bs_record_img/4.jpg" width='250' height='398' alt="运动品牌" /></a></li> <li><a href="#"><img src="bs_record_img/4.jpg" width='250' height='398' alt="运动品牌" /></a></li> <li><a href="#"><img src="bs_record_img/4.jpg" width='250' height='398' alt="运动品牌" /></a></li> <li><a href="#"><img src="bs_record_img/4.jpg" width='250' height='398' alt="运动品牌" /></a></li> <li><a href="#"><img src="bs_record_img/4.jpg" width='250' height='398' alt="运动品牌" /></a></li> </ul> </div> <div id="item5" class="item"> <h2>5F 电器</h2> <ul> <li><a href="#"><img src="bs_record_img/5.jpg" width='250' height='398' alt="家用电器" /></a></li> <li><a href="#"><img src="bs_record_img/5.jpg" width='250' height='398' alt="家用电器" /></a></li> <li><a href="#"><img src="bs_record_img/5.jpg" width='250' height='398' alt="家用电器" /></a></li> <li><a href="#"><img src="bs_record_img/5.jpg" width='250' height='398' alt="家用电器" /></a></li> <li><a href="#"><img src="bs_record_img/5.jpg" width='250' height='398' alt="家用电器" /></a></li> <li><a href="#"><img src="bs_record_img/5.jpg" width='250' height='398' alt="家用电器" /></a></li> <li><a href="#"><img src="bs_record_img/5.jpg" width='250' height='398' alt="家用电器" /></a></li> <li><a href="#"><img src="bs_record_img/5.jpg" width='250' height='398' alt="家用电器" /></a></li> <li><a href="#"><img src="bs_record_img/5.jpg" width='250' height='398' alt="家用电器" /></a></li> </ul> </div> </div> </body> </html>
指点迷津：
运用css和jQuery，实现导航菜单在右侧绝对定位显示，并且可以在滚动时根据滚动条的位置自动设置导航菜单的焦点。
温馨提示 : 完成任务后，请验证是否与实践描述效果一致，如一致，恭喜您，你已经掌握此技能，否则，请重复学习此节内容。
任务
一、静态网页的实现
1.运用CSS，让导航菜单在右侧绝对定位显示。
2.运用锚点，实现导航定位。
提示: 使用position属性。
二、jQuery实现定位导航特效
1.滚动条发生滚动时，要获取相应的值。
提示:先要获取到相应的scrollTop()、导航和当前所在的楼层。
2.实现让导航菜单在滚动条滚动的时候自动设置焦点
提示：这里遍历时需要对滚动条位置和每个元素位置做一个判断，并把相应的元素id值赋予currentId
3. 给相应楼层的 a 设置current，取消其他链接的current
197
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
