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>

code in docs.google.com

这是您可以预览我的代码的站点：http://htmledit.squarefree.com/

额外说明：很抱歉给您带来不便，我不知道如何在这里显示我的代码，而且当我使用 JSfiddle 时，代码似乎没有运行。

我不能使用代码片段功能，因为它不允许我使用，如果我知道如何使用，我无论如何都会使用它。

Answer 1

Firefox 错误控制台中的错误是

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

您尝试在加载之前获取 HTML 元素。您需要将整个脚本放在最后，在整个 HTML 之后（当然是在 </html> 之前），或者使用类似 document.onload.

的东西

Answer 2

你的问题是 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

The Element.scrollTop property gets or sets the number of pixels that the content of an element is scrolled upward.

因此将其设置为函数没有任何意义。

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

JavaScript does not work in internet explorer and Firefox but works in Google

html

javascript

internet-explorer

mozilla

google-chrome