1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 * {margin: 0; padding: 0; border: none;} 8 ul,li {list-style: none;} 9 10 11 #loutiNav { 12 position: fixed; 13 left: 40px; 14 top: 25%; 15 30px; 16 border: 1px solid black; 17 background:pink; 18 } 19 #loutiNav li { 20 30px; 21 height: 29px; 22 border-bottom: 1px dashed white; 23 font-size: 14px; 24 text-align: center; 25 line-height: 29px; 26 position: relative; 27 cursor: pointer; 28 } 29 #loutiNav li span { 30 display: none; 31 position: absolute; 32 left: 0; 33 top: 0; 34 30px; 35 height: 29px; 36 background: white; 37 } 38 #loutiNav li:hover span{ 39 display: block; 40 background: darkred; 41 color: white; 42 } 43 #loutiNav li span.active { 44 display: block; 45 background: white; 46 color: darkred; 47 } 48 49 #head, #main div, #foot { 50 1000px; 51 height: 600px; 52 font-size: 100px; 53 text-align: center; 54 line-height: 600px; 55 margin: 0 auto; 56 } 57 58 </style> 59 <script src="js/jquery-1.12.3.js"></script> 60 <script> 61 $(function(){ 62 63 var isMoving = false; //是否点击了按钮页面正在动画移动 64 65 $("#loutiNav li").click(function(){ 66 67 //改变按钮的选中状态 68 $(this).find("span").addClass("active") 69 .parent().siblings().find("span").removeClass("active"); 70 71 //移动页面到对应的楼层 72 var index = $(this).index(); 73 var _top = $(".louti").eq(index).offset().top; 74 75 //$(window).scrollTop(_top); 76 isMoving = true; 77 $("html, body").stop().animate({scrollTop:_top}, 400, function(){ 78 isMoving = false; 79 }); 80 }) 81 82 //滚动事件 83 $(window).scroll(function(){ 84 85 if ( !isMoving ) { 86 var scrollTop = $(window).scrollTop(); 87 88 //遍历所有楼层 89 var index = 0; 90 $(".louti").each(function(){ 91 if ( scrollTop >= $(this).offset().top ){ 92 //console.log( $(this).index() ); 93 index = $(this).index(); 94 } 95 }) 96 //console.log(index); 97 98 $("#loutiNav li").eq(index).find("span").addClass("active") 99 .parent().siblings().find("span").removeClass("active"); 100 } 101 }) 102 103 104 }) 105 </script> 106 </head> 107 <body> 108 <div id="loutiNav"> 109 <ul> 110 <li>1F<span class="active">服饰</span></li> 111 <li>2F<span>美妆</span></li> 112 <li>3F<span>手机</span></li> 113 <li>4F<span>家电</span></li> 114 <li>5F<span>数码</span></li> 115 <li>6F<span>运动</span></li> 116 <li>7F<span>居家</span></li> 117 <li>8F<span>母婴</span></li> 118 <li>9F<span>食品</span></li> 119 <li>10F<span>图书</span></li> 120 <li>11F<span>服务</span></li> 121 </ul> 122 </div> 123 124 <div id="head" style="background: #008800;">头部</div> 125 <div id="main"> 126 <div class="louti" style="background: #666699;">1F服饰</div> 127 <div class="louti" style="background: #66FF99;">2F美妆</div> 128 <div class="louti" style="background: #33CC99;">3F手机</div> 129 <div class="louti" style="background: #663399;">4F家电</div> 130 <div class="louti" style="background: #669966;">5F数码</div> 131 <div class="louti" style="background: #99FF99;">6F运动</div> 132 <div class="louti" style="background: #33FF99;">7F居家</div> 133 <div class="louti" style="background: #66CC99;">8F母婴</div> 134 <div class="louti" style="background: #663377;">9F食品</div> 135 <div class="louti" style="background: #666666;">10F图书</div> 136 <div class="louti" style="background: #9999FF;">11F服务</div> 137 </div> 138 <div id="foot" style="background: #008800;">尾部</div> 139 140 </body> 141 </html>