JS 實作導覽列懸停效果(續2)_javascript技巧

【JS-實作導覽列懸停】
【JS-實現導覽列懸停】
【
JS-實現導覽列懸停（續）
】

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

1.首先Js程式碼冗餘，導航條上的Tab是用js實現跳轉而不是超連結；

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

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

最終的程式碼變更如下：

test.html 複製程式碼

複製程式碼



複製程式碼



複製程式碼


程式碼如下:

1

tab1

tab2

tab3

tab4

2

3

4

5

6

7

test.js




複製程式碼


程式碼如下:


//記錄導覽列set 原來在頁上的位置
varop igaoffi% = 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(){

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. 🎜>複製程式碼 程式碼如下:

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



}



}



}



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

div. 🎜>width: 800px;
height: 40px;
background: red;

margin: 0 auto;
top: 400px;
left:50%;
margin-left:-400px;
}

div.tab{
width: 195px;
height: 40px;
background: blue left;
margin-left: 5px;
} 總結： 出現這個問題的原因還是CSS的佈局定位不熟悉。 在這裡沒法通過：margin 0 auto；來設定導航條div水平居中，因為fixed定位的元素沒辦法透過這種方式來定位。 透過margin 0 auto；來定位的元素不能為fixed定位，且其父元素必須要有固定的寬度。 那麼怎麼使fixed定位的元素水平居中呢？ 透過：left: 50%，將該元素的最左邊與父元素寬的中點對其，然後透過marg-left: [該元素寬度的1/2]px；來將這個元素向左移動它的寬度的一般，從而使這個元素居中。