基于Layui用JQ实现锚点定位/电梯导航(附带效果GIF)

今天要给页面用JQ实现一个锚点定位，就是经常听到的电梯导航，京东和淘宝的主页都有这样的应用，一般是用于页面太长，方便用户定位到需要的位置，就是放的锚点。

 

 

---

下面看看HTML内容：

//这个是导航栏
<div class="side-nav">
    <span class="active">选择评分机</span>  //默认选择的位置
    <span>本机IP设置</span>
    <span>平台设置</span>
    <span>程序升级</span>
    <span>配置管理</span>
</div>

//结构
<div class="floor floor-01"></div>
<div class="floor floor-02"></div>
<div class="floor floor-03"></div>
<div class="floor floor-04"></div>
<div class="floor floor-05"></div>
<div class="footer"></div>  //底部

下面是CSS内容:

//这个是整个导航栏的设置

.side-nav{
    width:100px;
    position:fixed;
    right:5%;
    top:1%;
    background:#f8f8f8;
    border-left: 1px solid #b2b2b2;
    height: 1000px;

}

//这个是span的设置
.side-nav span{
    display:block;
    width:200px;
    height:80px;
    text-align: center;
    line-height: 50px ;
    color:#0C0C0C;
    cursor: pointer;
    background: #f8f8f8;
    font-size: 13px;
}

//被选中的效果
.side-nav .active{
    /*border:3px solid #009688;*/
    color: #42b983;
    font-size: 18px;
    font-weight: 700;

}

CSS我反正是慢慢调整的，所以很有可能会误导你，尽量先搬上去，再去自己调整。被选中的效果我定的就是字体加粗，字体变大，颜色改变。

下面是JS的内容：

$(function(){
    //给一个颜色数组
    var colorArr = ['red','orange','yellow','green','blue'];
    //便利给各个导航“span”元素，和各个对应的楼层栏目元素
    for(i=0;i<$('.side-nav span').length;i++){
        $('.side-nav span').eq(i).css({font:colorArr[i]});
        $('.floor').eq(i).css({font:colorArr[i]});
    }

    //安利一下知识点
    //arr.push()
    //push() 方法可把它的参数顺序添加到 arrayObject 的尾部。它直接修改 arrayObject，而不是创建一个新的数组。
    //offset()
    //JQ中获取匹配元素在当前视口的相对偏移。返回的对象包含两个整型属性：top 和 left。此方法只对可见元素有效。

    //获取各个楼层的距离浏览器上部偏移量,并放入数组
    var divTopArr = [];
    for(var i=0;i<$('.floor').length;i++){
        divTopArr.push($('.floor').eq(i).offset().top);
    }

    //给导航每个栏目按钮添加点击事件，点击导航上的每个栏目按钮，html(body)元素滑动到对应的栏目
    $('.side-nav span').click(function(){
        $('body,html').animate({scrollTop:divTopArr[$(this).index()]+5+'px'});//没有+5的时候发现定位并不准确。
        $('.side-nav span').removeClass('active');
        $(this).addClass('active');
    })


    //添加页面滚轮滚动事件，
    $(window).scroll(function(){
        //获取获取页面当前已经滚动的scrollTop值
        var scrollTop = $(window).scrollTop();
        //divTopArr 遍历每一个楼层或者每个楼层对应的按钮
        for(i=0;i<$('.side-nav span').length;i++){
            //判断当前页面已经滚动的top值是否大于最后一个楼层top偏移量（最后一个要拿出来单算）
            if(scrollTop < divTopArr[divTopArr.length-1]){
                //          给一个循环动态判断的条件，若当前scrollTop值大于数组的arr[i],且小于arr[i+1],就对应的栏目按钮添加样式
                if(scrollTop >= divTopArr[i] && scrollTop < divTopArr[i+1]){
                    $('.side-nav span').removeClass('active');
                    $('.side-nav span').eq(i).addClass('active');
                }
            }else{
                //若当前scrollTop值大于数组的arr[length-1](即数组的最后一个值，最后一个栏目的offsetTop),
                $('.side-nav span').removeClass('active');
                $('.side-nav span').eq(divTopArr.length-1).addClass('active');
            }
        }

    })
})

使用的时候发现了定位不准，点击导航栏，从1跳转到4的时候，页面是跳过来了，但是导航栏的选中效果还停留在相邻的3上面。于是我在点击事件里面加了5px，这样的话下面监听的判断余量就比较大，不会出现导航栏选中效果不准确的情况。然后JS最上面的数组我拿过来用就是改变颜色的，我懒得改了就直接在css里面把color！important了，不会出现效果。有空的话再改。