<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> * {margin: 0; padding: 0; border: none;} ul, li {list-style: none;} #loutiNav { 30px; position: fixed; left: 40px; top: 25%; border: 1px solid black; } #loutiNav li { 30px; height: 29px; border-bottom: 1px dashed white; text-align: center; line-height: 29px; font-size: 12px; position: relative; cursor: pointer; } #loutiNav li span { display: none; position: absolute; 30px; height: 29px; left: 0; top: 0; background: darkred; } #loutiNav li:hover span{ display: block; color: white; } #loutiNav li span.active { display: block; background: white; color: darkred; } #head, #main div, #foot { 1000px; height: 600px; text-align: center; line-height: 600px; font-size: 100px; margin: 0 auto; } </style> <script type="text/javascript" src="js/jquery-1.12.3.js" ></script> <script> $(function(){ //点击楼层按钮,页面是否正在移动 var isMoving = false; //点击楼层按钮 $("#loutiNav li").click(function(){ //改变按钮的选中状态 $(this).find("span").addClass("active") .parent().siblings().find("span").removeClass("active"); //下标 var index = $(this).index(); var top = $(".louti").eq(index).offset().top; //$(window).scrollTop(top); isMoving = true; $("html, body").stop().animate({scrollTop:top}, 500, function(){ isMoving = false; }); }) //scroll $(window).scroll(function(){ if (isMoving == false) { var scrollTop = $(window).scrollTop(); console.log(scrollTop); //遍历 var index = 0; $(".louti").each(function(){ var top = $(this).offset().top; if (scrollTop >= top){ //console.log(top); index = $(this).index(); } }) //console.log(index); //改变楼梯按钮的选中状态 $("#loutiNav li").eq(index).find("span").addClass("active") .parent().siblings().find("span").removeClass("active"); } }) }) </script> </head> <body> <div id="loutiNav"> <ul> <li>1F<span class="active">服饰</span></li> <li>2F<span>美妆</span></li> <li>3F<span>手机</span></li> <li>4F<span>家电</span></li> <li>5F<span>数码</span></li> <li>6F<span>运动</span></li> <li>7F<span>居家</span></li> <li>8F<span>母婴</span></li> <li>9F<span>食品</span></li> <li>10F<span>图书</span></li> <li>11F<span>服务</span></li> </ul> </div> <div id="head" style="background: #008000;">头部</div> <div id="main"> <div class="louti" style="background: #ABCDEF;">1F服饰</div> <div class="louti" style="background: #003366;">2F美妆</div> <div class="louti" style="background: #009988;">3F手机</div> <div class="louti" style="background: #776611;">4F家电</div> <div class="louti" style="background: #FF88FF;">5F数码</div> <div class="louti" style="background: #FF3333;">6F运动</div> <div class="louti" style="background: #60F043;">7F居家</div> <div class="louti" style="background: #00CCDD;">8F母婴</div> <div class="louti" style="background: #ABF0EF;">9F食品</div> <div class="louti" style="background: #F78787;">10F图书</div> <div class="louti" style="background: #666699;">11F服务</div> </div> <div id="foot" style="background: #008000;">底部</div> </body> </html>