Search code examples
javascripthtmlgoogle-chromeinternet-explorermozilla

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

As the title stated, the javascript code won't run in IE and Mozilla Firefox.

What does the code do? The navigation bar would be relative but upon scrolling, the position would be fixed.

Here's the code:

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

Here's the site where you can preview my code:http://htmledit.squarefree.com/

Extra note: Sorry for the inconvenience, I don't know how to display my code here and when I used JSfiddle, the code doesn't seem to run.

I can't use the code snippet function because it does not allow me to, if I had known how to use, I would have used it anyway.

Solution

  • Your problem is that document.body.scrollTop is always 0 in FireFox.

    The reasons for this is because document.body.scrollTop is deprecated and should not be used anymore Why is body.scrollTop deprecated?

    But document.documentElement.scrollTop will be always 0 in Chrome, so you need a 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");
    }
  }

    Beside that the document.getElementById("navbar").scrollTop > 10 does not make any sense because navbar is not scrollable and document.getElementById("navbar").scrollTop = function() { ... } is completely wrong:

    MDN: Element.scrollTop

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

    So setting it to a function does not make any sense.