JavaScript 在 Internet Explorer 和 Firefox 中不起作用，但在 Google 中有效

Question

正如標題所述，javascript 代碼不會在 IE 和 Mozilla Firefox 中運行。

代碼有什么作用？ 導航欄是相對的，但在滾動時，位置將是固定的。

這是代碼：

<!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>

docs.google.com 中的代碼

這是您可以預覽我的代碼的站點： http : //htmledit.squarefree.com/

額外說明：很抱歉給您帶來不便，我不知道如何在此處顯示我的代碼，而且當我使用 JSfiddle 時，代碼似乎無法運行。

我無法使用代碼片段功能，因為它不允許我使用，如果我知道如何使用，無論如何我都會使用它。

Answer 1

您的問題是在 FireFox 中document.body.scrollTop始終為0 。

這樣做的原因是因為document.body.scrollTop已被棄用，不應再使用為什么 body.scrollTop 已被棄用？

但是在 Chrome 中document.documentElement.scrollTop將始終為0 ，因此您需要一個跨瀏覽器方法來檢測瀏覽器窗口的 scrollTop

  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 屬性獲取或設置元素內容向上滾動的像素數。

因此將其設置為函數沒有任何意義。

Answer 2

Firefox 錯誤控制台中的錯誤是

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

您嘗試在加載之前獲取 HTML 元素。 您需要將整個腳本放在最后，在整個 HTML 之后（當然在</html>之前），或者使用類似document.onload東西。

JavaScript 在 Internet Explorer 和 Firefox 中不起作用，但在 Google 中有效

問題描述

2 個解決方案

解決方案1
1 已采納 2016-05-14 19:02:29

解決方案2
0 2016-05-14 18:01:53

JavaScript 在 Internet Explorer 和 Firefox 中不起作用，但在 Google 中有效

問題描述

2 個解決方案

解決方案1 1 已采納 2016-05-14 19:02:29

解決方案2 0 2016-05-14 18:01:53

解決方案1
1 已采納 2016-05-14 19:02:29

解決方案2
0 2016-05-14 18:01:53