Js效果：楼层跳跃

个人博客新地址：→点我♪(＾∀＾●)ﾉ

实现思路

通过scroll的距离来判断当前的展示区域属于哪一个楼层

布局

Html

  <ul class="nav">
        <li>享受品质</li>
        <li>服饰美妆</li>
        <li>家电手机</li>
        <li>电脑数码</li>
        <li>3C运动</li>
    </ul>
    <ul class="content">
        <li>享受品质</li>
        <li>服饰美妆</li>
        <li>家电手机</li>
        <li>电脑数码</li>
        <li>3C运动</li>
    </ul>

CSS

<style>
*{margin:0;padding:0;}
li{
    list-style: none;
    color: #FFFFFF;
}
.nav{
    position: fixed;
    left: 15px;
    top: 80px;
}
.nav li{
    width: 70px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
    background: #666;
    color: #FFFFFF;
}
.nav .now{
    background: lightcoral;
}
html, body{
    height: 100%;
}
ul{
    height: 500%;
}
.content li{
    height: 20%;
    font: 100px "Microsoft YaHei";
    text-align: center;
}

</style>

JS实现

<script>
var navLiArr = $('ul')[0].children;
var contentLiArr = $('ul')[1].children;

//给每个不同楼层添加不同的颜色
var colorArr = ['lightgreen','lightseagreen','lightskyblue',
    'lightgray','lightyellow'];

for (var i=0; i<contentLiArr.length;i++){
    contentLiArr[i].style.background = colorArr[i];
}
// 点击转到对应的楼层
for (var i=0;i<navLiArr.length;i++){
  navLiArr[i].index=i;
    navLiArr[i].onclick=click;
}

function click () {
    //改变样式
    var parent=this.parentNode;
    parent.isclick=true;
    for(var j = 0; j <navLiArr .length; j++ ){
        navLiArr[j].className='';
    }
    this.className='now';
    var dis=this.index*document.body.offsetHeight*1;
    clearInterval(window.timer);
    window.timer=setInterval(function () {
        var pos=(dis-scroll().top)/10;
        pos=pos>0?Math.ceil(pos):Math.floor(pos);
        window.scrollTo(0,scroll().top+pos);
        if(dis==scroll().top){
            clearInterval(window.timer);
            parent.isclick=false;
        }
    })

}

window.onscroll=function (ev) {
// console.log(ev)
    if(!navLiArr[0].parentNode.isClick){
        //滚动到相应板块  改变样式
        //获取滚动距离 scroll（）。top
        var dis=document.body.offsetHeight;
        var topDis=scroll().top;
        var t=topDis/dis;
        //t 与 navLiArr[i].index 比较
        t=Math.round(t);
        console.log(t);
        for(var k = 0; k <navLiArr .length; k++ ){
            navLiArr[k].className='';
        }
        navLiArr[t].className='now';
    }
}
</script>