js、jq兩種方法實現網頁側邊導航
阿新 • • 發佈：2019-02-13
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 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&¤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<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&¤tLink.attr('href')!=curentId) {
currentLink.removeClass('current');
menu.find('[href="'+curentId+'"]').addClass('current');
}
});
});思路:
實現的思路和js第一種一樣,不過是用jq寫的罷了.