<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } div{ 1000px; margin: 0 auto; } #floorList{ display: none; position: fixed; left: 100px; top: 50%; margin-top: -165px; list-style: none; 50px; height: 330px; } #floorList li{ height: 30px; text-align: center; line-height: 30px; font-size: 20px; color: gray; cursor: pointer; } #floorList i{ font-style: normal; } #floorList span{ display: none; } #floorList li:hover{ background: red; } #floorList li:hover i{ display: none; } #floorList li:hover span{ color:white; display:block; } </style> </head> <body> <div id="header" style="height: 1000px;background: red;"></div> <div style="height: 500px;background: green;">1F</div> <div style="height: 300px; background: yellow;">2F</div> <div style="height: 1500px;background: blue;">3F</div> <div style="height: 2500px;background: pink;">4F</div> <div style="height: 800px;background: gray;">5F</div> <div style="height: 1300px;background: orange;">6F</div> <div style="height: 700px;background: purple;">7F</div> <div style="height: 400px;background: aliceblue;">8F</div> <div style="height: 500px;background: aqua;">9F</div> <div style="height: 700px;background: gold;">10F</div> <div style="height: 800px;background: darkblue;">11F</div> <ul id="floorList"> <li><i>1F</i><span>服饰</span></li> <li><i>2F</i><span>美妆</span></li> <li><i>3F</i><span>手机</span></li> <li><i>4F</i><span>数码</span></li> <li><i>5F</i><span>家电</span></li> <li><i>6F</i><span>运动</span></li> <li><i>7F</i><span>居家</span></li> <li><i>8F</i><span>母婴</span></li> <li><i>9F</i><span>食品</span></li> <li><i>10F</i><span>图片</span></li> <li><i>11F</i><span>服饰</span></li> </ul> <script src="js/jquery-2.2.1.min.js"></script> <script> var headerTop = $("#header").outerHeight(); $(window).scroll(function(){
//超过多少的时候显示 小于的话隐藏 if($(window).scrollTop() >= headerTop) { $("#floorList").fadeIn(500); }else{ $("#floorList").fadeOut(500); } })
$("#floorList li").click(function(){ var index=$(this).index();
//点击哪一个的时候 获取哪一个元素到顶部的高度 var oTop = $('div').not("#header").eq(index).offset().top;
//控制scroll为点击的那个元素到顶部的高度 $("body").animate({scrollTop:oTop},1000,function(){
//当点击哪一个li的时候设置css 字体颜色为红色 $("#floorList li").eq(index).css({"color":"red"});
//span变成取消隐藏 $("#floorList li").eq(index).children("span").css("display","block")})
//span的兄弟 为i标签 i标签隐藏 $("#floorList li").eq(index).children("span").siblings().css("display","none"); }) </script> </body> </html>