JavaScript不適用於Internet Explorer和Firefox，但適用於Google

-2

正如標題所述，JavaScript代碼不會在IE和Mozilla Firefox中運行。JavaScript不適用於Internet Explorer和Firefox，但適用於Google

代碼是做什麼的？導航欄將是相對的，但在滾動時，位置將被固定。

下面的代碼：

<!doctype html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Untitled Document</title> 
    <style> 
     .container { 
     max-width: 1500px; 
     margin: auto; 
     height: 1000px; 
     } 

     nav { 
     background-color: white; 
     height: 80px; 
     width: 100%; 
     position: relative; 
     top: 0; 
     } 

     nav ul { 
     width: 700px; 
     padding: 20px; 
     margin: auto; 
     list-style-type: none; 
     } 

     nav ul li { 
     float: left; 
     width: 138px; 
     text-align: center; 
     } 

     nav ul li a { 
     padding: 10px; 
     display: block; 
     font-family: "Arial Rounded MT Bold", "Arial Narrow", "Arial Unicode MS", "Arial Black", Arial, sans-serif; 
     text-transform: uppercase; 
     font-weight: 500; 
     text-decoration: none; 
     height: 20px; 
     cursor: pointer; 
     color: black; 
     } 
     /*End of nav */ 

     .test { 
     position: fixed; 
     width: 100%; 
     height: 60px; 
     background-color: white; 
     z-index: 10; 
     animation: nav 1s 1; 
     -ms-animation: nav 1s 1; 
     -moz-animation: nav 1s 1; 
     } 

     @keyframes nav { 
     from { 
      opacity: 0; 
      top: -40px; 
     } 
     to { 
      top: 0; 
      opacity: 1; 
     } 
     } 

     @-moz-keyframes nav { 
     from { 
      opacity: 0; 
      top: -40px; 
     } 
     to { 
      top: 0; 
      opacity: 1; 
     } 
     } 

     @-ms-keyframes nav { 
     from { 
      opacity: 0; 
      top: -40px; 
     } 
     to { 
      top: 0; 
      opacity: 1; 
     } 
     } 

    </style> 
    <script> 
     document.getElementById("navbar").scrollTop = function() { 
     bodyscroll() 
     } 

     function bodyscroll() { 
     if (document.body.scrollTop > 10 || document.getElementById("navbar").scrollTop > 10) { 
      document.getElementById("navbar").classList.add("test"); 
     } else { 
      document.getElementById("navbar").classList.remove("test"); 
     } 
     } 

    </script> 
    </head> 

    <body onScroll="bodyscroll()"> 
    <div class="container"> 
     <nav id="navbar"> 
     <ul> 
      <li>Home</li> 
      <li>About Us</li> 
      <li> Products 
      </li> 
      <li>Events</li> 
      <li>Contact Us</li> 
     </ul> 
     </nav> 
    </div> 
    <!--Select to select the page--> 
    </body> 
</html>

code in docs.google.com

這裏的網站，在這裏你可以預覽我的代碼：http://htmledit.squarefree.com/

額外注：很抱歉給您帶來不便，我不知道該怎麼在這裏顯示我的代碼，當我使用JSfiddle時，代碼似乎不運行。

我不能使用代碼片段功能，因爲它不允許我，如果我已經知道如何使用，我會反正使用它。

來源

2016-05-14 Josephine Nobel

對不起，但沒有人會通過該代碼。請創建一個plunker/jsfiddle。 –

鏈接到squarefree是沒用的。你需要從那裏得到一個URL，以某種方式指定你的代碼。您已在該鏈接中發佈*無任何代碼*。 – doug65536

Stackoverflow不是一個免費的bug修復服務。你沒有說過什麼是錯的或你期望的。你真的希望每個人都能獨立地重新創建一個保存在文字處理器中的代碼的測試嗎？ – doug65536

你的問題是document.body.scrollTop在Firefox中總是0。

這種情況的原因是因爲document.body.scrollTop已過時，不應該再使用Why is body.scrollTop deprecated?

但document.documentElement.scrollTop會在Chrome總是0，所以你需要一個Cross-browser method for detecting the scrollTop of the browser window

function bodyscroll() { 
    if ((window.scrollY || document.documentElement.scrollTop) > 10) { 
     document.getElementById("navbar").classList.add("test"); 
    } else { 
     document.getElementById("navbar").classList.remove("test"); 
    } 
    }

旁邊的document.getElementById("navbar").scrollTop > 10做沒有任何意義，因爲navbar不可滾動，而document.getElementById("navbar").scrollTop = function() { ... }是完全錯誤的：

MDN: Element.scrollTop

的Element.scrollTop屬性獲取或設置一個元素的內容被向上滾動的像素的數量。

因此，將它設置爲函數沒有任何意義。

來源

2016-05-14 19:02:29

哦，我的上帝，現在它的作品！謝謝！！ –

在Firefox的錯誤控制檯的錯誤是

TypeError: document.getElementById(...) is null test.html:67:1

您嘗試加載之前就得到一個HTML元素。您需要將整個腳本放在最後，在整個HTML之後（但當然在</html>之前），或者使用document.onload之類的東西。

來源

2016-05-14 18:01:53 deamentiaemundi

JavaScript不適用於Internet Explorer和Firefox，但適用於Google

回答

相關問題