JSナビゲーションバーのサスペンション効果を実現(続き2)

【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

 
  
//               
  
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を します.を します.