快捷導(dǎo)航

JS 實(shí)現(xiàn)導(dǎo)航欄懸停效果(續(xù)2)

更新時(shí)間：2013年09月24日 16:07:30 作者：

發(fā)現(xiàn)原來(lái)的方法還有是有幾個(gè)問(wèn)題：首先Js代碼冗余，導(dǎo)航條上的Tab是用js實(shí)現(xiàn)跳轉(zhuǎn)而不是超鏈接，還有導(dǎo)航條本身用fixed定位，但沒(méi)有被設(shè)置為水平居中，而是在JS中更改left值使其居中

【JS-實(shí)現(xiàn)導(dǎo)航欄懸停】
【JS-實(shí)現(xiàn)導(dǎo)航欄懸停（續(xù)）】

用Jquery重新寫(xiě)完這個(gè)頁(yè)面之后，發(fā)現(xiàn)原來(lái)的方法還有是有幾個(gè)問(wèn)題：

1.首先Js代碼冗余，導(dǎo)航條上的Tab是用js實(shí)現(xiàn)跳轉(zhuǎn)而不是超鏈接；

2.還有導(dǎo)航條本身用fixed定位，但沒(méi)有被設(shè)置為水平居中，而是在JS中更改left值使其居中。

問(wèn)題2就導(dǎo)致了，當(dāng)瀏覽器窗口尺寸發(fā)生變化的時(shí)候，瀏覽器中的div的位置都發(fā)生了變化，也就導(dǎo)致了沒(méi)法通過(guò)頁(yè)面中的div動(dòng)態(tài)的給已fixed定位的導(dǎo)航條來(lái)定位。

最終的代碼更改如下：

test.html

復(fù)制代碼代碼如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> 
<script type="text/javascript" src="test.js"></script> 
<link rel="stylesheet" type="text/css" href="test.css"></link> 
<title>Test</title> 
</head> 
<body> 
<div id="main_div" class="main"> 
<div id="content_div1" class="content">1</div> 
<div id="nav" class="navigation"> 
<a href="#content_div3"><div id="tab_div1" class="tab">tab1</div></a> 
<a href="#content_div4"><div id="tab_div2" class="tab">tab2</div></a> 
<a href="#content_div5"><div id="tab_div3" class="tab">tab3</div></a> 
<a href="#content_div6"><div id="tab_div4" class="tab">tab4</div></a> 
</div> 
<div id="content_div2" class="content">2</div> 
<div id="content_div3" class="content">3</div> 
<div id="content_div4" class="content">4</div> 
<div id="content_div5" class="content">5</div> 
<div id="content_div6" class="content">6</div> 
<div id="content_div7" class="content">7</div> 
</div> 
</body> 
</html> 

test.js

復(fù)制代碼代碼如下:

 
//記錄導(dǎo)航條原來(lái)在頁(yè)面上的位置 
var naviga_offsetTop = 0; 

//使導(dǎo)航條，懸停在頂部 
function naviga_stay_top(){ 
//獲取滾動(dòng)距離 
var scrollTop = $(document).scrollTop(); 
//如果向下滾動(dòng)的距離大于原來(lái)導(dǎo)航欄離頂部的距離 
//直接將導(dǎo)航欄固定到可視區(qū)頂部 
if( scrollTop > naviga_offsetTop ){ 
$("#nav").css({"top": "0px"}); 
} else { 
//如果向下滾動(dòng)的距離小原來(lái)導(dǎo)航欄離頂部的距離，則重新計(jì)算導(dǎo)航欄的位置 
$("#nav").css({"top": naviga_offsetTop - scrollTop + "px"}); 
} 
} 

function onload_function(){ 
//記錄初始狀態(tài)導(dǎo)航欄的高度 
naviga_offsetTop = $("#nav").attr("offsetTop"); 

//綁定滾動(dòng)和鼠標(biāo)事件 
$(window).bind("scroll", naviga_stay_top); 
$(window).bind("mousewheel",naviga_stay_top); 
$(document).bind("scroll", naviga_stay_top); 
$(document).bind("mousewheel",naviga_stay_top); 
} 

$(document).ready( onload_function ); 

test.css:注意navigation類的樣式

復(fù)制代碼代碼如下:

 
div.main{ 
width: 800px; 
background: #CCC; 
margin: 10px auto 0; 
position: relative; 
} 

div.content{ 
width: 800px; 
height: 400px; 
background: yellow; 
margin: 10px auto 0; 
} 

div.navigation{ 
width: 800px; 
height: 40px; 
background: red; 
margin: 0 auto; 
top: 400px; 
left:50%; 
position: fixed; 
margin-left:-400px; 
} 

div.tab{ 
width: 195px; 
height: 40px; 
background: blue; 
float: left; 
margin-left: 5px; 
} 

總結(jié)：

出現(xiàn)這個(gè)問(wèn)題的原因還是CSS的布局定位不熟悉。

在這里沒(méi)法通過(guò)：margin 0 auto；來(lái)設(shè)置導(dǎo)航條div水平居中，因?yàn)閒ixed定位的元素沒(méi)法通過(guò)這種方式來(lái)定位。

通過(guò)margin 0 auto；來(lái)定位的元素不能為fixed定位，并且其父元素必須要有固定的寬度。

那么怎么使fixed定位的元素水平居中呢？

通過(guò)：left: 50%，將該元素的最左邊與父元素寬的中點(diǎn)對(duì)其，然后通過(guò)marg-left: [該元素寬度的1/2]px；來(lái)將這個(gè)元素向左移動(dòng)它的寬度的一般，從而使這個(gè)元素居中。

您可能感興趣的文章: