JavaScript funktioniert nicht in Internet Explorer und Firefox funktioniert aber in Google

-2

Wie der Titel angegeben, wird der Javascript-Code nicht in IE und Mozilla Firefox ausgeführt.JavaScript funktioniert nicht in Internet Explorer und Firefox funktioniert aber in Google

Was macht der Code? Die Navigationsleiste wäre relativ, aber beim Scrollen wäre die Position festgelegt.

Hier ist der 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

Hier ist der Ort, an dem Sie meinen Code können eine Vorschau: http://htmledit.squarefree.com/

Zusätzliche Anmerkung: Es tut uns leid, ich weiß nicht, wie man zeige meinen Code hier an und wenn ich JSfiddle benutzte, scheint der Code nicht zu laufen.

Ich kann die Code-Snippet-Funktion nicht verwenden, weil es mir nicht erlaubt, wenn ich gewusst hätte, wie man es benutzt, hätte ich es trotzdem benutzt.

Quelle

2016-05-14 Josephine Nobel

Entschuldigung, aber niemand wird diesen Code durchlaufen. Bitte erstelle einen Plunker/Jsfiddle. –

Der Link zu squarefree ist nutzlos. Sie müssen eine URL von dort bekommen, die irgendwie Ihren Code spezifiziert. Sie haben * in diesem Link * keinen Code * gepostet. – doug65536

Stackoverflow ist kein kostenloser Fehlerbehebungsdienst. Du hast kein einziges Wort darüber gesagt, was falsch ist oder was du erwartet hast. Sie erwarten wirklich, dass jeder unabhängig einen Test für Ihren in einem Textverarbeitungsprogramm gespeicherten Code neu erstellt? – doug65536

Ihr Problem ist, dass immer 0 in FireFox ist.

Die Gründe dafür ist, dass document.body.scrollTop ist veraltet und nicht mehr in Chrome sein Why is body.scrollTop deprecated?

Aber document.documentElement.scrollTop verwendet werden sollte, immer 0, so dass Sie ein Neben 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"); 
    } 
    }

müssen, dass die document.getElementById("navbar").scrollTop > 10 tut macht keinen Sinn, weil navbar ist nicht scrollbar und document.getElementById("navbar").scrollTop = function() { ... } ist völlig falsch:

MDN: Element.scrollTop

Die Element.scrollTop Eigenschaft Ruft die Anzahl der Pixel, die der Inhalt eines Elements nach oben gescrollt wird.

Es macht also keinen Sinn, es auf eine Funktion zu setzen.

Quelle

2016-05-14 19:02:29

Oh mein Gott, es funktioniert jetzt !! Vielen Dank!! –

Der Fehler in Fehlerkonsole Firefox ist

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

Sie versuchen, ein HTML-Element zu erhalten, bevor es geladen wird. Sie müssen entweder das ganze Skript am Ende, nach dem ganzen HTML (aber vor </html> natürlich) setzen oder etwas wie document.onload verwenden.

Quelle

2016-05-14 18:01:53 deamentiaemundi

JavaScript funktioniert nicht in Internet Explorer und Firefox funktioniert aber in Google

Antwort

Verwandte Themen