停止固定在頁面頂部的浮動導航欄

我試圖模仿我見過幾次不同時間的東西。通常在下面有一個帶有導航欄的橫幅，當頁面滾動時，它會移動，直到它接觸到頂部，然後停止並保持固定。我不完全確定如何做到這一點。我看到了幾個不同的東西，只是不工作。停止固定在頁面頂部的浮動導航欄

環顧四周後，我發現它會像這樣工作，但我似乎得到它的工作。我想我錯過了一些東西

<!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 – 2012-02-19 04:05:45

我從來沒有用過，但我會盡量 – shinjuo 2012-02-19 04:06:52

它很容易只是你的代碼粘貼到框中單擊保存和分享的鏈接 – 2012-02-19 04:07:48

到一個不存在的navTopPos變量的所有引用應改爲引用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 2012-02-19 04:22:27

@shinjuo發揮我們最好的。你能接受嗎？它將幫助任何未來遇到這個問題的人。 – 2012-02-19 04:24:18

是的，但我發現主要問題是我沒有設置topPos任何東西。一旦設置爲120，它的效果很好 – shinjuo 2012-02-19 04:27:09

停止固定在頁面頂部的浮動導航欄

回答

相關問題