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

【问题标题】：JavaScript does not work in internet explorer and Firefox but works in GoogleJavaScript 在 Internet Explorer 和 Firefox 中不起作用，但在 Google 中起作用
【发布时间】：2016-05-14 17:52:27
【问题描述】：

如标题所述，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 时，代码似乎没有运行。

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

【问题讨论】：

抱歉，没有人会仔细阅读该代码。请创建一个 plunker/jsfiddle。
squarefree的链接没用。您需要从那里获取一个以某种方式指定您的代码的 url。您在该链接中发布了没有任何代码。
Stackoverflow 不是免费的错误修复服务。你没有说什么是错的或你所期望的。您真的希望每个人都独立地为您保存在文字处理器中的代码重新创建测试吗？
我知道这不是免费的错误修复服务，但你认为我来这里是为了什么？我来这里是为了从我的错误中学习，但我找不到错误，这就是我来这里提问的原因。 @TarunDugar 因为代码没有显示在 JSfiddle 中，所以你不会知道错误。是的，我知道我在发布此 cmets 时此时非常自私，因为我浪费了 1 个小时来学习如何将无法熟练使用的代码放在此网站上。
@t.niese 感谢您帮助我进行编辑，这是我第三次使用 Stackoverflow，所以我可能不太擅长使用它。无论如何，我尝试将它加载到身体上，但它仍然不起作用。 TypeError 仍然存在。

标签： javascript html google-chrome internet-explorer mozilla

【解决方案1】：

您的问题是 document.body.scrollTop 在 FireFox 中始终是 0。

原因是document.body.scrollTop已被弃用，不应再使用Why is body.scrollTop deprecated?

但在 Chrome 中document.documentElement.scrollTop 将始终为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 属性获取或设置元素内容向上滚动的像素数。

所以将其设置为函数没有任何意义。

【讨论】：

【解决方案2】：

Firefox 的错误控制台中的错误是

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

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

【讨论】：