滑动效果

滑动效果

自己做了个小效果*****

<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")
})