js、jq两种方法实现网页侧边导航

最新推荐文章于 2022-03-21 19:39:19 发布

mr_fzz

最新推荐文章于 2022-03-21 19:39:19 发布

阅读量6.3k

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/mr_fzz/article/details/53308497

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

js第一种方法:

实现的效果如下:
1.在侧栏滑动时背景颜色切换和字体颜色切换.
2.窗口滚动时，右边侧栏随之变化.
3.点击侧栏选项,跳动到当前选项对应的页面,并且侧栏也随之变化.

这里写图片描述

代码如下:
html+css:

*{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        .main{
            width: 800px;
            margin: 30px auto;          
        }
        .menu{
            position: fixed;
            left: 50%;
            top: 130px;
            margin-left: 400px;
        }
        .menu li a{
            display: block;
            margin: 5px 0;
            height: 40px;
            width: 80px;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
            font-size: 14px;
            color: #333;
        }
        .menu li a:hover,
        .menu li .current{
            background: #0088bb;
            color: #fff;
        }
        .main h1{
            color: #498;
        }
        .content{
            padding: 20px;
            border: 2px solid #ddd;
            margin-bottom: 10px;
        }
        .content h2{
            border-bottom: 2px solid green;
            margin-bottom: 5px;
        }
        .content li{
            display: inline;
            margin-right: 10px;
        }
        .content img{
            width: 230px;
            height: 230px;
        }
    </style>
</head>
<body>
    <div id="menu" class="menu">
        <ul>
            <li><a href="#content1" class="current">1F 男装</a></li>
            <li><a href="#content2">2F 女装</a></li>
            <li><a href="#content3">3F 美妆</a></li>
            <li><a href="#content4">4F 数码</a></li>
            <li><a href="#content5">5F 母婴</a></li>
        </ul>
    </div>
    <div id="main" class="main">
        <h1>地狗购物网</h1>
        <div id="content1" class="content">
            <h2>1F男装</h2>
            <ul>
                <li><a href="#"><img src="i/1F.jpg" alt=""></a></li>
                <li><a href="#"><img src="i/1F.jpg" alt=""></a></li>
                <li><a href="#"><img src="i/1F.jpg" alt=""></a></li>
                <li><a href="#"><img src="i/1F.jpg" alt=""></a></li>
                <li><a href="#"><img src="i/1F.jpg" alt=""></a></li>
                <li><a href="#"><img src="i/1F.jpg" alt=""></a></li>
                <li><a href="#"><img src="i/1F.jpg" alt=""></a></li>
                <li><a href="#"><img src="i/1F.jpg" alt=""></a></li>
                <li><a href="#"><img src="i/1F.jpg" alt=""></a></li>
            </ul>
        </div>
        <div id="content2" class="content">
            <h2>2F女装</h2>
            <ul>
                <li><a href="#"><img src="i/2F.jpg" alt=""></a></li>
                <li><a href="#"><img src="i/2F.jpg" alt=""></a></li>
                <li><a href="#"><img src="i/2F.jpg" alt=""></a></li>
                <li><a href="#"><img src="i/2F.jpg" alt=""></a></li>
                <li><a href="#"><img src="i/2F.jpg" alt=""></a></li>
                <li><a href="#"><img src="i/2F.jpg" alt=""></a></li>
                <li><a href="#"><img src="i/2F.jpg" alt=""></a></li>
                <li><a href="#"><img src="i/2F.jpg" alt=""></a></li>
                <li><a href="#"><img src="i/2F.jpg" alt=""></a></li>
            </ul>
        </div>
        <div id="content3" class="content">
            <h2>3F美妆</h2>
            <ul>
                <li><a href="#"><img src="i/3F.jpg" alt=""></a></li>
                <li><a href="#"><img src="i/3F.jpg" alt=""></a></li>
                <li><a href="#"><img src="i/3F.jpg" alt=""></a></li>
                <li><a href="#"><img src="i/3F.jpg" alt=""></a></li>
                <li><a href="#"><img src="i/3F.jpg" alt=""></a></li>
                <li><a href="#"><img src="i/3F.jpg" alt=""></a></li>
                <li><a href="#"><img src="i/3F.jpg" alt=""></a></li>
                <li><a href="#"><img src="i/3F.jpg" alt=""></a></li>
                <li><a href="#"><img src="i/3F.jpg" alt=""></a></li>
            </ul>
        </div>
        <div id="content4" class="content">
            <h2>4F母婴</h2>
            <ul>
                <li><a href="#"><img src="i/4F.png" alt=""></a></li>
                <li><a href="#"><img src="i/4F.png" alt=""></a></li>
                <li><a href="#"><img src="i/4F.png" alt=""></a></li>
                <li><a href="#"><img src="i/4F.png" alt=""></a></li>
                <li><a href="#"><img src="i/4F.png" alt=""></a></li>
                <li><a href="#"><img src="i/4F.png" alt=""></a></li>
                <li><a href="#"><img src="i/4F.png" alt=""></a></li>
                <li><a href="#"><img src="i/4F.png" alt=""></a></li>
                <li><a href="#"><img src="i/4F.png" alt=""></a></li>
            </ul>
        </div>
        <div id="content5" class="content">
            <h2>5F数码</h2>
            <ul>
                <li><a href="#"><img src="i/5F.jpg" alt=""></a></li>
                <li><a href="#"><img src="i/5F.jpg" alt=""></a></li>
                <li><a href="#"><img src="i/5F.jpg" alt=""></a></li>
                <li><a href="#"><img src="i/5F.jpg" alt=""></a></li>
                <li><a href="#"><img src="i/5F.jpg" alt=""></a></li>
                <li><a href="#"><img src="i/5F.jpg" alt=""></a></li>
                <li><a href="#"><img src="i/5F.jpg" alt=""></a></li>
                <li><a href="#"><img src="i/5F.jpg" alt=""></a></li>
                <li><a href="#"><img src="i/5F.jpg" alt=""></a></li>
            </ul>
        </div>
    </div>

js:

window.onload=function(){
    var menu=document.getElementById('menu');
    var main=document.getElementById('main');
    var content=main.getElementsByClassName('content');
    window.onscroll=function(){
        var currentId='';
        var sTop=document.documentElement.scrollTop||document.body.scrollTop;
        for(var i=0;i<content.length;i++){
            var cTop=content[i].offsetTop;
            if (sTop>cTop-150) {
                currentId=content[i].id;
            }else{
                break;
            }
        }
        var currentLink=menu.getElementsByClassName('current')[0];
        if (currentId&&currentLink.href!=currentId) {
            currentLink.className=currentLink.className.replace(/^current\s+|\s+curent\s+|\s+current\s*$|^current$/g,' ');
            menus=menu.getElementsByTagName('a');
            for(var j=0;j<menus.length;j++){
                if (menus[j].href.replace(/.*#/,'')==currentId) {
                    menus[j].className+=' current';
                }
            }
        }
    };
};

思路:
1.实现滑过背景颜色和字体颜色变化可以通过css hover伪类来解决.这里的右侧栏定位有个小诀窍,因为是fixed定位,可以先left:50%;然后再用margin-left中间内容宽度的一半，可以达到紧贴中间内容.

2.窗口滚动时,侧栏也随之变化，可以通过window.onscroll事件来监听窗口的滚动,当滚动的距离大于左侧content距离页面顶部的距离-150(为了用户体验)时，右侧侧栏随之发生改变(添加上current样式),用currentId保存左侧content的id,检查当前带有current样式的a标签的href指向当前content的id,如果不是,则用字符串的replace()方法去掉current样式,循环所有a标签,检查a标签的href的id指向,这里href属性要用replace截取#之后的值,然后给符合条件的a标签添加上current样式.

js第二种方法

window.onload=function(){
    var menu=document.getElementById('menu');
    var main=document.getElementById('main');
    var content=main.getElementsByClassName('content');
    var mark=0;
    window.onscroll=function(){
        var currentId='';
        var sTop=document.documentElement.scrollTop||document.body.scrollTop;
        for(var i=0;i<content.length;i++){
            var cTop=content[i].offsetTop;
            if (sTop>cTop-150) {
                mark=i;
            }else{
                break;
            }
        }
        var menus=menu.getElementsByTagName('a');
        for(var j=0;j<menus.length;j++){
            menus[j].className=menus[j].className.replace(/^current\s+|\s+curent\s+|\s+current\s*$|^current$/g,' ');
        }
        menus[mark].className+=' current';
    };
};

思路:
用mark来存储当前左侧content的索引,然后给右侧a标签索引为mark的a添加上样式.不过要先循环将带有current样式的a标签的current去掉.

jq实现

$(function(){
    $(window).scroll(function(){
        var top=$(window).scrollTop();
        var menu=$('#menu');
        var content=$('.content');
        var curentId='';
        content.each(function() {
            var m=$(this);
            var mTop=m.offset().top;
            if (top>mTop-150) {
                curentId='#'+m.attr('id');
            }else{
                return false;
            }
        });
        var currentLink=menu.find('.current');
        if (curentId&&currentLink.attr('href')!=curentId) {
            currentLink.removeClass('current');
            menu.find('[href="'+curentId+'"]').addClass('current');
        }
    });
});

思路:

实现的思路和js第一种一样,不过是用jq写的罢了.

mr_fzz

关注

0
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
js、jq两种方法实现网页侧边导航

js第一种方法:实现的效果如下: 1.在侧栏滑动时背景颜色切换和字体颜色切换. 2.窗口滚动时，右边侧栏随之变化. 3.点击侧栏选项,跳动到当前选项对应的页面,并且侧栏也随之变化.代码如下: html+css:*{ margin: 0; padding: 0; } li{ list-sty
复制链接

扫一扫