楼梯效果
2019-07-11 本文已影响0人
zkzhengmeng
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>楼梯效果</title>
<style>
body,div,ul,li {
margin: 0;
padding: 0;
text-align: center;
font-weight: bold;
}
ul,li {
list-style-type: none;
}
/*楼梯导航列表ul*/
#floornav {
width: 32px;
position: fixed;
left: 50px;
top: 150px;
border: 1px solid #ddd;
/*最开始楼梯隐藏*/
display: none;
}
#floornav li {
width: 32px;
height: 32px;
position: relative;
border-bottom: 1px dotted #ddd;
font-size: 12px;
text-align: center;
line-height: 32px;
cursor: pointer;
}
/*top按钮样式,最后一个li*/
#floornav .lastli {
background-color: #C00;
color: #FFF;
}
/*悬浮在li之上，让span显示，背景颜色改变*/
#floornav li:hover span {
display: block;
background-color: #C00;
color: #FFF;
}
/*选中的li中的span*/
#floornav li.select span{
display: block;
background-color: #C00;
color: #FFF;
}
/*使用定位覆盖下面的文字*/
#floornav li span {
width: 32px;
position: absolute;
top: 0;
left: 0;
/*避免看到后面的文字*/
background-color: #FFF;
display: none;
}
#wrap {
width: 1000px;
margin: 0 auto;
}
#header {
width: 1000px;
height: 1000px;
background-color: #0F0;
line-height: 1000px;
font-size: 80px;
}
/*楼梯*/
.Louti {
height: 600px;
line-height: 600px;
font-size: 80px;
}
/*底部*/
#footer {
height: 400px;
line-height: 400px;
background-color: #F00;
font-size: 80px;
}
</style>
</head>
<body>
<!--楼梯按钮-->
<ul id="floornav">
<li class="select">
1F<span>服饰</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>
<li class="lastli">
Top
</li>
</ul>
<div id="wrap">
<div id="header">header头部区域</div>
<div id="content">
<div class="Louti" style="background: #cc0033;">
服饰
</div>
<div class="Louti" style="background: #999933;">
美妆
</div>
<div class="Louti" style="background: #ccff33;">
手机
</div>
<div class="Louti" style="background: #006633;">
家电
</div>
<div class="Louti" style="background: #6666cc;">
数码
</div>
<div class="Louti" style="background: #ff6600;">
运动
</div>
<div class="Louti" style="background: #ffff00;">
居家
</div>
<div class="Louti" style="background: #3333ff;">
母婴
</div>
<div class="Louti" style="background: #ff00cc;">
食品
</div>
<div class="Louti" style="background: #669900;">
图书
</div>
<div class="Louti" style="background: #ff66cc;">
服务
</div>
</div>
<div id="footer">footer区域</div>
</div>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function () {
//1.点击事件
$("#floornav li").not(".lastli").click(function () {//选取排除包含lastli类名的li即回到顶部
//让li选中
$(this).addClass("select").siblings().removeClass("select");
//滚动
var index = $(this).index();
// console.log(index);
var st = $(".Louti").eq(index).offset().top;
console.log(st);
//jQuery ,obj.scrollTop ,obj.style.width
$("body,html").animate({
scrollTop: st
});
});
//2.检测滚动事件
var $floors = $(".Louti");
$(window).scroll(function () {
var st = $(this).scrollTop();
//让左侧楼梯导航显示或者隐藏
if(st<1000) {
$("#floornav").fadeOut(400);
}
else {
$("#floornav").fadeIn(400);
}
//需要寻找索引
//找到临界值 st < offset().top+$().height()/2
//遍历所有的楼梯，找到最先满足临界条件的就是对应的楼层
$floors.each(function (index) {
var bValue = $floors.eq(index).offset().top+$floors.eq(index).height()/2;
console.log(bValue);
if(st<bValue) {//找到满足条件的结束即可
$("#floornav li").eq(index).addClass("select").siblings().removeClass("select");
return false;//结束each遍历
}
});
});
//3.回到顶部
$("#floornav .lastli").click(function () {
$("body,html").animate({
scrollTop: 0
},400);
});
});
</script>
</body>
</html>
