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

js第一种方法:

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

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            var cTop=content[i].offsetTop;
            if (sTop>cTop-150) {
                currentId=content[i].id;
            }else{
                break;
            }
        }
        var currentLink=menu.getElementsByClassName('current')[0];
        if (currentId&¤tLink.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                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            var cTop=content[i].offsetTop;
            if (sTop>cTop-150) {
                mark=i;
            }else{
                break;
            }
        }
        var menus=menu.getElementsByTagName('a');
        for(var j=0;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&¤tLink.attr('href')!=curentId) {
            currentLink.removeClass('current');
            menu.find('[href="'+curentId+'"]').addClass('current');
        }
    });
});

思路:

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