类似天猫侧边导航栏

最新推荐文章于 2022-10-19 00:30:22 发布

原创最新推荐文章于 2022-10-19 00:30:22 发布 · 置顶 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#导航 #JavaScript #jQuery

JQuery 专栏收录该内容

7 篇文章

订阅专栏

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

/*垂直导航栏开始*/

//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;
}

/*垂直导航栏结束*/