滾動效果的Javascript代碼適用於Safari/Chrome，而不是Firefox/Opera

我有一個網頁，其中最初存在75px左右的頁面頂部。我編寫了一個腳本，當導航欄碰到瀏覽器窗口的頂部時，它將導航欄固定到瀏覽器窗口的頂部。這在safari/chrome中可以正常工作，但在其他瀏覽器中不會觸發該效果。酒吧從未切換到其固定模式。我是新來的HTML/CSS/JavaScript，所以問題可能很簡單。下面是代碼：滾動效果的Javascript代碼適用於Safari/Chrome，而不是Firefox/Opera

<head> 
<link rel="stylesheet" href="foo_css.css" /> 
<script type="text/javascript"> 
function window_onload() { 
    window.addEventListener("scroll",navbar_reset_top,false); 
} 

var navbar_top=75; 

function navbar_reset_top() { 
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; 
    if(scrollTop>navbar_top&&nav.className==="navbar_absolute") { 
     document.getElementById("nav").className="navbar_fixed"; 
    } 
    else if(scrollTop<navbar_top&&nav.className==="navbar_fixed") { 
     document.getElementById("nav").className="navbar_absolute"; 
    } 
} 
</script> 

</head> 
<body onload="javascript:window_onload();"> 
<div id="nav" class="navbar_absolute"> 
<ul>

這是所有相關的CSS，我認爲：

#nav.navbar_fixed { 
    position:fixed; 
    top:0px; 
} 

#nav.navbar_absolute { 
    position:absolute; 
    top:74px; 
}

來源

2012-07-20 user1541805

這裏有一個稍微修改後的版本應該工作在Firefox。

var nav, navbar_top = 75; 
    function window_onload() { 
     nav = document.getElementById("nav"); 
     window.addEventListener("scroll", navbar_reset_top, false); 
    } 

    function navbar_reset_top() { 

     var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 

     // you won't need the && nav.className==="navbar_absolute" part 
     if(scrollTop > navbar_top && nav.className==="navbar_absolute") { 
      nav.className="navbar_fixed"; 
     } 
     // you don't need the check for nav.className==="navbar_fixed" part either 
     else if(scrollTop < navbar_top && nav.className==="navbar_fixed") { 
      nav.className="navbar_absolute"; 
     } 
    }

來源

2012-07-21 01:35:19 SMathew

滾動效果的Javascript代碼適用於Safari/Chrome，而不是Firefox/Opera

回答

相關問題