JS 實現導航欄懸停效果(續2)

2019-11-20 21:56:59

字體：大中小

來源：轉載

供稿：網友

【JS-實現導航欄懸停】
【JS-實現導航欄懸停（續）】

用Jquery重新寫完這個頁面之后，發現原來的方法還有是有幾個問題：

1.首先Js代碼冗余，導航條上的Tab是用js實現跳轉而不是超鏈接；

2.還有導航條本身用fixed定位，但沒有被設置為水平居中，而是在JS中更改left值使其居中。

問題2就導致了，當瀏覽器窗口尺寸發生變化的時候，瀏覽器中的div的位置都發生了變化，也就導致了沒法通過頁面中的div動態的給已fixed定位的導航條來定位。

最終的代碼更改如下：

test.html

復制代碼代碼如下:

 
<!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

復制代碼代碼如下:

 
//記錄導航條原來在頁面上的位置 
var naviga_offsetTop = 0; 

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

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

//綁定滾動和鼠標事件 
$(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類的樣式

復制代碼代碼如下:

 
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; 
} 

總結：

出現這個問題的原因還是CSS的布局定位不熟悉。

在這里沒法通過：margin 0 auto；來設置導航條div水平居中，因為fixed定位的元素沒法通過這種方式來定位。

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

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

通過：left: 50%，將該元素的最左邊與父元素寬的中點對其，然后通過marg-left: [該元素寬度的1/2]px；來將這個元素向左移動它的寬度的一般，從而使這個元素居中。

上一篇：js判斷選擇時間不能小于當前時間的示例代碼

下一篇：JS 實現導航欄懸停效果(續)