【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>
//記錄導航條原來在頁面上的位置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 );
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；來將這個元素向左移動它的寬度的一般，從而使這個元素置中。
參考：http://ljj284860475.blog.163.com/blog/static/81423862009102713414312/
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
