JavaScriptはInternet ExplorerやFirefoxでは動作しませんが、Googleで動作します。

-2

タイトルに記載されているように、javascriptコードはIEとMozilla Firefoxでは動作しません。JavaScriptはInternet ExplorerやFirefoxでは動作しませんが、Googleで動作します。

コードは何をしますか？ナビゲーションバーは相対的ですが、スクロールすると位置が固定されます。

は、ここでは、コードです：ここで

<!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を使用したときにコードが実行されていないようです。

私はコードスニペット機能を使用できません。使用方法がわかっていれば、それを使用していたはずです。

出典

2016-05-14 Josephine Nobel

申し訳ありませんが、誰もそのコードを通過することはありません。 plunker/jsfiddleを作成してください。 –

squarefreeへのリンクは役に立たない。何らかの形でコードを指定するURLを取得する必要があります。あなたはそのリンクにコード*が何も掲載されていません。 – doug65536

Stackoverflowは無料のバグ修正サービスではありません。あなたは何が間違っているのか、あなたが期待していたことについて一言も言わなかった。ワードプロセッサに保存されたコードのテストは、誰もが独立して再作成することを本当に期待していますか？ – doug65536

問題はdocument.body.scrollTopは常にFireFoxの0です。

この理由はdocument.body.scrollTopは推奨されているので、そしてもうWhy is body.scrollTop deprecated?

しかしdocument.documentElement.scrollTop使用すべきではない、常に0 Chromeでも、あなたが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プロパティは、要素のコンテンツを上方にスクロールされている画素の数を取得または設定します。

だから、それを関数に設定しても意味がありません。

出典

2016-05-14 19:02:29

ああ私の神それは今働く!!ありがとう!! –

Firefoxのエラーコンソールにエラーがあなたはそれがロードされる前に、HTML要素を取得しようと

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

です。スクリプト全体を最後に置くか、HTML全体の後に置くか（もちろん</html>の前に）、またはdocument.onloadのようなものを使用する必要があります。

出典

2016-05-14 18:01:53 deamentiaemundi

JavaScriptはInternet ExplorerやFirefoxでは動作しませんが、Googleで動作します。

答えて

関連する問題