JavaScript不适用于internet explorer和Firefox，但适用于谷歌

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

本文关键字：适用于 Firefox 谷歌 explorer 不适用 internet JavaScript 更新时间：2023-09-26

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

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

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

原因是document.body.scrollTop已弃用，不应再使用为什么body.scrollTop已弃用？

但在Chrome中，document.documentElement.scrollTop将始终是0，因此您需要一种跨浏览器方法来检测浏览器窗口的滚动顶部

  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属性获取或设置元素内容向上滚动的像素数。

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

Firefox错误控制台中的错误是

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

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