js、jq两种方法实现网页侧边导航
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;ivar 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;jif (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;ivar cTop=content[i].offsetTop;
if (sTop>cTop-150) {
mark=i;
}else{
break;
}
}
var menus=menu.getElementsByTagName('a');
for(var j=0;j/^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写的罢了.