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

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

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

Answer 2

Firefox错误控制台中的错误是

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

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

JavaScript无法在Internet Explorer和Firefox中运行，但适用于Google

2 个答案: