类似天猫侧边导航栏

可能有些麻烦，以后知道怎么优化会改的

/*垂直导航栏开始*/

//index()方法 获得第一个匹配元素相对于其同级元素的index位置 所有兄弟节点中的索引

var arr = ["1460", "2150", "2935", "3620", "4330", "5020", "5725", "6423", "0"];

//把元素到页面顶部的高写死在数组里 不太科学但也可以 你也可以获取元素距顶部的距离

var isMouseOver = true; //控制鼠标移上移下事件和click事件的冲突 true时执行hover

$(".com-nav1").hover(function () { //绑定hover事件

if ($(this).hasClass('active')) { //激活状态 （下面有解释）

isMouseOver = false; //不执行hover

} else {

isMouseOver = true; //否则执行hover

$(this).addClass('spe-com-nav' + $(this).index());

//字符串和索引拼接形成一个类（css写好了） 添加样式

}

}, function () {

if (isMouseOver) {

$(this).removeClass('spe-com-nav' + $(this).index()); //移除样式

}

}).on('click', function () { //点击事件

isMouseOver = false;//不执行hover

$(this).addClass('spe-com-nav' + $(this).index() + ' active')

.siblings().removeClass().siblings().addClass('com-nav com-nav1');

//添加样式和active类

/*如果不特别添加一个类来区分是否是激活状态 点击之后 鼠标再hover当前$(".com-nav1")元素就会执行hover 移除样式*/

/*移除所有兄弟的类 再给所有兄弟添加基础类（设置样式和用来选中元素的类）com-nav com-nav1

不能直接移除兄弟的多余类 之前有拼接字符串 不好取值*/

$(window).scrollTop(arr[$(this).index()]);

//页面滚动到当前被点击的元素对应的索引 在数组中对应的值

});

//页面滚动事件

$(window).scroll(function (i) { //当窗体滚动

//var scroll = document.documentElement.scrollTop || document.body.scrollTop;

//获取页面滚动高度 js

var windowHeight = $(window).scrollTop(); //获取页面滚动高度 jq

if (windowHeight > 800) { //当滚动距离大于800（800根据自己页面调整就好）

$('#ver-nav').css({ //导航栏显示

display: 'block'

});

$(arr).each(function (idx,ele) {

//循环数组 each（）方法有两个参数 idx（索引） ele（索引对应值）

if(windowHeight>(ele-200)&&windowHeight<(arr[idx+1]-600)){

//滚动高度大于当前元素对应值并且小于下个元素对应值 数字是用来纠正的 都可调

$('.com-nav1'). eq(idx).addClass('spe-com-nav' +idx + ' active') //之前因为没写这个 一直做不出来

.siblings().removeClass().siblings().addClass('com-nav com-nav1');

//索引等于idx的$('.com-nav1')元素添加样式 之后原理同上

};

if(windowHeight>6200){ //页面中最后一部分

$('.com-nav1').eq(7).addClass('spe-com-nav7' + ' active') //在我的页面中 索引是7

.siblings().removeClass().siblings().addClass('com-nav com-nav1');

}

});

} else {

$('#ver-nav').css({ //滚动距离<800 隐藏

display: 'none'

});

$('.com-nav1').removeClass().addClass('com-nav com-nav1');

//并且清除添加的类 下次滚动页面时相当于重新开始

};

});

/*垂直导航栏结束*/

/**
 * Created by Administrator on 2018/5/21 0021.
 */

/*垂直导航栏开始*/
var arr = ["1460", "2150", "2935", "3620", "4330", "5020", "5725", "6423", "0"];
//index()获得第一个匹配元素相对于其同级元素的index位置 所有兄弟节点中的索引
// var scroll = document.documentElement.scrollTop || document.body.scrollTop;

var isMouseOver = true; //控制鼠标移上移下事件和click事件的冲突
$(".com-nav1").hover(function () {
    if ($(this).hasClass('active')) {//激活状态
        isMouseOver = false;   //不执行hover
    } else {
        isMouseOver = true;  //否则执行hover
        $(this).addClass('spe-com-nav' + $(this).index());
    }
}, function () {
    if (isMouseOver) {
        $(this).removeClass('spe-com-nav' + $(this).index());
    }
}).on('click', function () {
    isMouseOver = false;//不执行hover
    $(this).addClass('spe-com-nav' + $(this).index() + ' active')
        .siblings().removeClass().siblings().addClass('com-nav com-nav1');
    $(window).scrollTop(arr[$(this).index()]);
});

//页面滚动事件
$(window).scroll(function (i) {
    var windowHeight = $(window).scrollTop();
    if (windowHeight > 800) {
        $('#ver-nav').css({
            display: 'block'
        });
        $(arr).each(function (idx,ele) {
            if(windowHeight>(ele-200)&&windowHeight<(arr[idx+1]-600)){
                $('.com-nav1').eq(idx).addClass('spe-com-nav' +idx + ' active')
                    .siblings().removeClass().siblings().addClass('com-nav com-nav1');
            };
            if(windowHeight>6200){
                $('.com-nav1').eq(7).addClass('spe-com-nav7' + ' active')
                    .siblings().removeClass().siblings().addClass('com-nav com-nav1');
            }
        });
    } else {
        $('#ver-nav').css({
            display: 'none'
        });
        $('.com-nav1').removeClass().addClass('com-nav com-nav1');
    };
});

/*垂直导航栏结束*/

<div id="ver-nav">
    <div class="com-nav " id="spe-com-nav">导航</div>
    <ul>
        <li class="com-nav com-nav1">天猫超市</li>
        <li class="com-nav com-nav1">天猫国际</li>
        <li class="com-nav com-nav1">美丽人生</li>
        <li class="com-nav com-nav1">潮电酷玩</li>
        <li class="com-nav com-nav1">居家生活</li>
        <li class="com-nav com-nav1">打造爱巢</li>
        <li class="com-nav com-nav1">户外出行</li>
        <li class="com-nav com-nav1">猜你喜欢</li>
        <li class="com-nav com-nav1" id="spe-com-top">顶部</li>
    </ul><!--侧边导航栏-->
</div>

/*垂直导航栏开始*/
#ver-nav {
    position: fixed;
    bottom: 50px;
    left: 5px;
    display: none;
}

.com-nav {
    width: 35px;
    height: 36px;
    text-align: center;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    font-size: 12px;
    margin: 2px 0;
    background-color: rgba(0, 0, 0, .6);
}

#spe-com-nav {
    background: red;
    line-height: 36px;
}

#spe-com-top {
    line-height: 36px;
}

#ver-nav ul .spe-com-nav8 {
    background-color: rgba(0, 0, 0, .3);
}

#ver-nav ul .spe-com-nav0 {
    background: #64c333;
}

#ver-nav ul .spe-com-nav1 {
    background: #ff0036;
}
#ver-nav ul .spe-com-nav2 {
    background: #ea5f8d;
}

#ver-nav ul .spe-com-nav3 {
    background: #0aa6e8;
}

#ver-nav ul .spe-com-nav4 {
    background: #00b262;
}

#ver-nav ul .spe-com-nav5 {
    background: #f15453;
}

#ver-nav ul .spe-com-nav6 {
    background: #19c8a9;
}

#ver-nav ul .spe-com-nav7 {
    background: #000;
}

/*垂直导航栏结束*/