jq 京东跳楼效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
width: 1000px;
margin: 0 auto;
}
#floorList{
display: none;
position: fixed;
left: 100px;
top: 50%;
margin-top: -165px;
list-style: none;
width: 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>
