滑动效果
自己做了个小效果*****
<div id="box">
<div id="menu">
<ul>
<li>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="last">Top</li>
</ul>
</div>
<div id="main">
<div class="Louti" style="background: #ff5959;">
<div id="header">头部</div>
服饰
</div>
<div class="Louti" style="background: #ffa347;">美妆</div>
<div class="Louti" style="background: #ffff42;">手机</div>
<div class="Louti" style="background: #64ff64;">家电</div>
<div class="Louti" style="background: #75ffff;">数码</div>
<div class="Louti" style="background: #6363ff;">运动</div>
<div class="Louti" style="background: #c074ff;">居家</div>
<div class="Louti" style="background: aquamarine;">母婴</div>
<div class="Louti" style="background: pink;">食品</div>
<div class="Louti" style="background: bisque;">图书</div>
<div class="Louti" style="background: lightgoldenrodyellow;">服务</div>
</div>
<div id="footer">尾部</div>
</div>
* {
margin: 0;
padding: 0;
}
#box{
padding: 10px;
box-sizing: border-box;
width: 100vw;
height: 100vh;
}
#menu {
position: fixed;
top: 25%;
left: 40px;
width: 30px;
border: 1px solid;
}
#menu ul li {
position: relative;
width: 30px;
height: 30px;
list-style: none;
text-align: center;
line-height: 30px;
font-size: 12px;
cursor: pointer;
border-bottom: 1px dotted #AAAAAA;
}
#menu ul li.last {
background: #ccc;
color: black;
border-bottom: none;
}
#menu ul li span {
display: none;
width: 30px;
height: 30px;
position: absolute;
top: 0;
left: 0;
color: red;
}
#menu ul li:hover span {
display: block;
background: darkred;
color: white;
}
#menu ul li span.active {
display: block;
background: darkred;
color: white;
}
#menu ul li:hover span.active {
display: block;
background: darkred;
color: white;
}
#header,
#main,
#footer {
margin: auto;
width: 100vw;
text-align: center;
font-size: 40px;
font-weight: bold;
}
#main div {
height: 700px;
font-size: 50px;
color: honeydew;
line-height: 700px;
}
#main div #header {
font-size: 40px;
height: 10vh;
background: #ccc;
}
#footer {
height: 500px;
background: #ccc;
}
// 除了回到顶部 的li 添加 点击事件
$("#menu >ul>li:not(.last)").click(function(){
// 当前 li 查找 span
$(this).find("span")
// 添加 选中样式
.addClass("active")
.end() // 回到 find 之前
// 当前li 的 所有兄弟 li 查找 span
.siblings().find("span")
// 移除 span 上的样式
.removeClass("active");
// 获取 当前 li 所在ul 中 的 下标
var index =$(this).index();
// 楼层 对应 内容 的 div
var div=$(".Louti").eq(index);
// 获取 楼层内容 相对 页面顶部距离
var divTop=div.offset().top;
// $(document).scrollTop(divTop);
$("body,html").animate({
"scrollTop":divTop
},1000)
})
// 回到顶部
$(".last").click(function(){
$(document).scrollTop(0)
$(this).siblings().find("span")
.removeClass("active");
})
// 滑动 选楼层
$(document).scroll(function(){
var sTop =$(this).scrollTop() ;
var dom= $(".Louti").filter(function(){
return Math.abs( $(this)
.offset().top- sTop ) < $(this).height()/2
})
var f= dom.index();
$("#menu >ul >li").eq(f).find("span") .addClass("active")
$("#menu >ul >li").eq(f).siblings().find("span").removeClass("active")
})