<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>瞎折腾网</title> <script src="jquery-3.2.1.js" type="text/javascript"></script> <script src="带锚点的侧方导航.js" type="text/javascript"></script> <link rel="stylesheet" href="带锚点的侧方导航.css" type="text/css"/> </head> <body> <div id="nav"> <ul> <li><a href="#floor1" class="current">1F</a></li> <li><a href="#floor2">2F</a></li> <li><a href="#floor3">3F</a></li> <li><a href="#floor4">4F</a></li> <li><a href="#floor5">5F</a></li> </ul> </div> <div id="main"> <h1>瞎折腾网</h1> <div id="floor1" class="floor"> <h2>1F</h2> <ul> <li><a href="#"><img src="images/1F.jpg" alt=""/> </a></li> <li><a href="#"><img src="images/1F.jpg" alt=""/> </a></li> <li><a href="#"><img src="images/1F.jpg" alt=""/> </a></li> <li><a href="#"><img src="images/1F.jpg" alt=""/> </a></li> <li><a href="#"><img src="images/1F.jpg" alt=""/> </a></li> <li><a href="#"><img src="images/1F.jpg" alt=""/> </a></li> <li><a href="#"><img src="images/1F.jpg" alt=""/> </a></li> <li><a href="#"><img src="images/1F.jpg" alt=""/> </a></li> <li><a href="#"><img src="images/1F.jpg" alt=""/> </a></li> </ul> </div> <div id="floor2" class="floor"> <h2>2F</h2> <ul> <li><a href="#"><img src="images/2F.jpg" alt=""/> </a></li> <li><a href="#"><img src="images/2F.jpg" alt=""/> </a></li> <li><a href="#"><img src="images/2F.jpg" alt=""/> </a></li> <li><a href="#"><img src="images/2F.jpg" alt=""/> </a></li> <li><a href="#"><img src="images/2F.jpg" alt=""/> </a></li> <li><a href="#"><img src="images/2F.jpg" alt=""/> </a></li> <li><a href="#"><img src="images/2F.jpg" alt=""/> </a></li> <li><a href="#"><img src="images/2F.jpg" alt=""/> </a></li> <li><a href="#"><img src="images/2F.jpg" alt=""/> </a></li> </ul> </div> <div id="floor3" class="floor"> <h2>3F</h2> <ul> <li><a href="#"><img src="images/1F.jpg" alt=""/> </a></li> <li><a href="#"><img src="images/1F.jpg" alt=""/> </a></li> <li><a href="#"><img src="images/1F.jpg" alt=""/> </a></li> <li><a href="#"><img src="images/1F.jpg" alt=""/> </a></li> <li><a href="#"><img src="images/1F.jpg" alt=""/> </a></li> <li><a href="#"><img src="images/1F.jpg" alt=""/> </a></li> <li><a href="#"><img src="images/1F.jpg" alt=""/> </a></li> <li><a href="#"><img src="images/1F.jpg" alt=""/> </a></li> <li><a href="#"><img src="images/1F.jpg" alt=""/> </a></li> </ul> </div> <div id="floor4" class="floor"> <h2>4F</h2> <ul> <li><a href="#"><img src="images/2F.jpg" alt=""/> </a></li> <li><a href="#"><img src="images/2F.jpg" alt=""/> </a></li> <li><a href="#"><img src="images/2F.jpg" alt=""/> </a></li> <li><a href="#"><img src="images/2F.jpg" alt=""/> </a></li> <li><a href="#"><img src="images/2F.jpg" alt=""/> </a></li> <li><a href="#"><img src="images/2F.jpg" alt=""/> </a></li> <li><a href="#"><img src="images/2F.jpg" alt=""/> </a></li> <li><a href="#"><img src="images/2F.jpg" alt=""/> </a></li> <li><a href="#"><img src="images/2F.jpg" alt=""/> </a></li> </ul> </div> <div id="floor5" class="floor"> <h2>5F</h2> <ul> <li><a href="#"><img src="images/1F.jpg" alt=""/> </a></li> <li><a href="#"><img src="images/1F.jpg" alt=""/> </a></li> <li><a href="#"><img src="images/1F.jpg" alt=""/> </a></li> <li><a href="#"><img src="images/1F.jpg" alt=""/> </a></li> <li><a href="#"><img src="images/1F.jpg" alt=""/> </a></li> <li><a href="#"><img src="images/1F.jpg" alt=""/> </a></li> <li><a href="#"><img src="images/1F.jpg" alt=""/> </a></li> <li><a href="#"><img src="images/1F.jpg" alt=""/> </a></li> <li><a href="#"><img src="images/1F.jpg" alt=""/> </a></li> </ul> </div> </div> </body> </html>
*{ margin:0; padding:0; } ul{ list-style: none; } a{ text-decoration: none; } #main{ width: 800px; margin: 0 auto; padding:20px; } #main h1{ color:#0088bb; } .floor{ padding: 30px; margin-top: 20px; border: 1px dotted #0088bb; } .floor h2{ font-size: 16px; font-weight: bold; border-bottom: 2px solid #0088bb; } #main .floor li{ display: inline; margin-right: 15px; } #main .floor li a img{ width: 230px; height: 230px; border: none; margin-top: 2px; } #nav{ position: fixed; top: 200px; left: 50%; margin-left: -480px; width:80px; } #nav ul li a{ font-size: 20px; display: block; color: #000; text-align: center; height: 40px; line-height: 40px; border-bottom: 1px solid #0088bb; } #nav ul li a:hover, #nav ul li a.current{ background-color: #0088bb; color: white; }
$(function () { $(window).scrollTop(0);//刷新页面回到顶部 $(window).scroll(function () { var top = $(document).scrollTop();//获取滚动条滚动位移 var nav = $("#nav");/*获取整个导航*/ var floors = $("#main").find(".floor");/*获取所有楼层模块*/ var currentId = ""; // 滚动条移动的时候，获取滚动条到浏览器顶的高度 floors.each(function () { var m = $(this); var floorTop = m.offset().top; if(top>floorTop-400){ currentId = "#"+m.attr("id"); }else { return false; } }); // 判断当前位置并更改当前盒子的class，从而使导航条跟随页面 var currentLink = nav.find(".current"); if(currentId&¤tLink.attr("href")!=currentId){ currentLink.removeClass("current"); nav.find("[href='"+currentId+"']").addClass("current"); } }); });