ページの上部に固定されている浮動ナビゲーションバー

私はいくつかの異なる時を見てきたことを模倣しようとしています。通常、下にナビゲーションバーが付いたバナーがあり、ページがスクロールされると、上に接触して固定された状態になるまで移動します。私はこれを達成する方法を完全にはわかっていません。私はちょうど仕事をしないいくつかの異なるものを見てきました。ページの上部に固定されている浮動ナビゲーションバー

周りを見回した後、私はそれがこのようなものになることを理解しましたが、動作させるように見えるかもしれません。私はいくつかのものに非existant navTopPos変数へ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
<!-- 
    #Table_01 { 
     position:relative; 
     left:0px; 
     top:0px; 
     width:1020px; 
     height:854px; 
     text-align: left; 
     margin-right: auto; 
     margin-left: auto; 
    } 
    body { 
     font-family: Verdana, Geneva, sans-serif; 
     font-size: 12px; 
     color: #a4c639; 
     text-align: center; 
     margin: 0px; 
    } 
--> 
</style> 
<script type='text/javascript'> 
    var topPos = 120; 
    var updatedPos; 
    window.onscroll = navPos; 
    if (!topPos) { 
     topPos = 120; 
    } 
    function navPos() { 
     var pos = window.scrollY; 
     if (!topPos) { 
      topPos = 120; 
     } 
     var st = document.getElementById('navTest'); 
     if (st) { 
      if (pos < topPos && updatedPos != 'absolute') { 
       st.style.position = 'absolute'; 
       st.style.top = topPos + 'px'; 
       updatedPos = 'absolute'; 
       //alert('Switched to absolute'); 
      } else if (pos >= topPos && updatedPos != 'fixed') { 
       st.style.position = 'fixed'; 
       st.style.top = '0'; 
       updatedPos = 'fixed'; 
       //alert('Switched to fixed'); 
      } 
     } 
    } 
    navPos(); 
</script> 
</head> 

<body> 
    <div id="Table_01"> 
     <div id='navTest' style='position:absolute;z-index:999;top:120px;left:0; height:50px;width:100%; background-color:#000;' width='100%'> 
     </div> 
    </div> 
</body> 
</html>

出典

2012-02-19 shinjuo

ポストはこれがjsfiddle.net –

に私がいることを使用したことがないが、私がしようとします – shinjuo

その簡単だけのボックスにあなたのコードを貼り付け保存]をクリックし、リンクを共有 –

すべての参照をしないのですtopPos変数を参照するように変更されるべきだと思います。あなたのJSコードは現在、次のようになります。

var topPos; 
var updatedPos; 
window.onscroll = navPos; 
if (!topPos) { 
    topPos = 120; 
} 
function navPos() { 
    var pos = window.scrollY; 
    if (!topPos) {//this line was changed 
     topPos = 120;//this line was changed 
    } 
    var st = document.getElementById('navTest'); 

    if (st) { 
     if (pos < topPos && updatedPos != 'absolute') { 
      st.style.position = 'absolute'; 
      st.style.top = topPos + 'px';//this line was changed 
      updatedPos = 'absolute'; 
      //alert('Switched to absolute'); 
     } else if (pos >= topPos && updatedPos != 'fixed') { 
      st.style.position = 'fixed'; 
      st.style.top = '0';  
      updatedPos = 'fixed'; 
      //alert('Switched to fixed'); 
     } 
    } 
} 
navPos();

インタプリタはどこかここで死んだ：必要に応じて変更して

if (!topNavPos) { 
    topNavPos = 120; 
}

Updated JSFiddle。

出典

2012-02-19 04:18:01

申し訳ありません私は時代の束を変更した後に私のコードを正しく編集しませんでしたが、間違って – shinjuo

@ shinjuo私たちの最善を尽くす。これを受け入れることができますか？これは、将来この問題を遭遇する人を助けるでしょう。 –

はい、しかし私は主な問題を見つけました。私はtopPosを何にも設定しませんでした。一度120に設定されるとうまくいく。 – shinjuo

ページの上部に固定されている浮動ナビゲーションバー

答えて

関連する問題