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

Question

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.

sorry, but nobody is going to go through that code. Please create a plunker/jsfiddle. — Tarun Dugar, May 14 '16 at 17:53
The link to squarefree is useless. You need to get a url from there that somehow specifies your code. You have posted *no code whatsoever* in that link. — doug65536, May 14 '16 at 17:54
Stackoverflow is not a free bug fixing service. You haven't said one word about what is wrong or what you expected. You really expect everyone to independently recreate a test for your code saved in a word processor? — doug65536, May 14 '16 at 17:57
I know it's not a free bug fixing service but why do you think I come here for? I am here to learn from my errors but I can't find the error which is why I came here to ask questions. @TarunDugar Because the code doesn't display in JSfiddle, you won't get to know the error. Yes, I know I am very selfish at this point when I'm posting this comments because I wasted 1 hours just to learn how to put the codes on this website that I can't use proficiently. — Josephine Nobel, May 14 '16 at 18:08
@t.niese Thank you for helping me with the editing, this is my third time using Stackoverflow so I might be a bit bad at using it. Anyway, I tried loading it on the body but it still doesn't work. The TypeError is still there. — Josephine Nobel, May 14 '16 at 18:46
Whenever you ask a question, you need to post the code with the question itself. And more important you need to check the console of your browser if it shows any error. If there is an error shown you need to either mention this error with your question, if you cannot figure out why you get that error or fix it. In your case the error is not the reason for your code not to work, but it should be the first thing you have to fix. Otherwise it is very unlikely that you will get the correct answer, because the minimum effort you should show is to recognize that there is an error message. — t.niese, May 14 '16 at 19:06

score 1 · Accepted Answer · edited May 23 '17 at 11:53

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.

score 0 · Answer 2 · answered May 14 '16 at 18:01

The error in Firefox's error console is

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

You try to get an HTML-element before it is loaded. You need to either put the whole script at the end, after the whole HTML (but before </html> of course), or use something like document.onload.

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

2 Answers2