IEで開いた後にhtmlインデックスプロジェクトがクラッシュする

私はCSSとhtmlが新しく、私の問題は本当に奇妙です。私は自分のサイトプロジェクトに取り組んでいましたが、数時間後にInternet Explorerで動作するかどうかを確認することにしました（私はChromeを使用しています）。 IEで私のHTMLファイルを開いた後、私のスティッキーメニュー（JSで書かれています）は動作しなくなりました（スクロールしてメニューが急激に変化するたびにトップに戻るため、それは最初からIE上で動作していませんでしたが、私はIEを閉じた後、Chromeでもこのように動作し始めました。私は自分のHTMLコードやCSSコードを変更していません。任意のアイデアやソリューションですか？ここでは、コードです：スクロール機能はIEで開いた後にhtmlインデックスプロジェクトがクラッシュする

<script src="jquery-3.2.1.min.js"></script> 
<script> 

     $(document).ready(function() { 
      var NavY = $('#mainmenu').offset().top; 

      var stickyNav = function(){ 
       var ScrollY = $(window).scrollTop(); 
       if (scrollY > NavY) { 
        $('#mainmenu').addClass('sticky'); 
       } else { 
        $('#mainmenu').removeClass('sticky'); 
       } 
      }; 

      stickyNav(); 
      $(window).scroll(function() { 
       stickyNav(); 
      }); 
     }); 

</script>

スティッキークラス：

.sticky 
{ 
    width: 100%;  
    position: fixed; 
    left: 0; 
    top: 0; 
    z-index: 100; 
}

メニューのdiv

#mainmenu 
{ 
    width: 100%; 
    text-align: center; 
    color: #ffffff; 
    background: url("img/ep_naturalblack.png"); 
    border-top: 7px solid #9e332f; 
    border-bottom: 7px solid #9e332f; 
    padding-top: 5px; 
    padding-bottom: 5px; 
    opacity: 0.99; 
}

HTML

<header> 
     <h1 class="logo">some logo text</h1> 

     <nav> 
      <div id="mainmenu"> 
       <ul class="menu"> 
        <li><a href="#">text</a></li> 
        <li><a href="#">text</a></li> 
        <li><a href="#">text</a></li> 
        <li><a href="#">text</a></li> 
        <li><a href="#">text</a></li> 
       </ul> 
      </div> 
     </nav> 
    </header>

ヘッドHTML

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta charset="utf-8"/> 


     <meta http-equiv="X-Ua-Compatible" content="IE=edge,chrome=1"> 
     <link rel="stylesheet" href="main.css"> 
     <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&amp;subset=latin-ext" rel="stylesheet">type="text/css"/> 
     <!--[if lt IE 9]> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script> 
     <![endif]--> 

    </head>

私はIE 11とchrome 61.0.3163.100を使用します。

出典

2017-10-24 0x07

あなたが使用して、どのようなOS上でされているIEとChromeのバージョンを追加してください？また、問題の再現を試みるために関連するHTMLを追加してください。 –

だから、ここで起こったことは、2つのブラウザ間でテストを開始したときに、あなたが見ていた画面のサイズを変更したことだと思います。コードをそのまま使用して、positionをfixedに変更すると、その要素の下のページのコンテンツが上に移動します。コンテンツの量および画面の高さに応じて、このシフトアップは、スクロールを可能にするのに十分なコンテンツが存在しなくなる可能性があります。これが起こると、あなたのコードは、コンテンツをページの下に押し戻すナビゲーションバーからstickyクラスを削除します。

私は2つのnavを持ってこれを得ました。 1つのナビゲーションは、最初にページに配置された場所に正確にとどまり、2つ目はページと共にスクロールします。これにより、スクロールを開始するときに、ナビゲーションバーの下のコンテンツはページ上に移動せず、表示されているこの吃音を取り除くことができます。

$(document).ready(function() { 
 
    var NavY = $('#mainmenu').offset().top; 
 

 
    var stickyNav = function() { 
 
    var ScrollY = $(window).scrollTop(); 
 
    if (ScrollY > NavY) { 
 
     $('#mainmenuScroll').removeClass('hidden'); 
 
    } else { 
 
     $('#mainmenuScroll').addClass('hidden'); 
 
    } 
 
    }; 
 

 
    stickyNav(); 
 
    $(window).scroll(function() { 
 
    stickyNav(); 
 
    }); 
 
});

.sticky { 
 
    position: fixed; 
 
    left: 0; 
 
    top: 0; 
 
    z-index: 100; 
 
} 
 

 
#mainmenu, #mainmenuScroll{ 
 
    width: 100%; 
 
    text-align: center; 
 
    color: #ffffff; 
 
    background: black; 
 
    border-top: 7px solid #9e332f; 
 
    border-bottom: 7px solid #9e332f; 
 
    padding-top: 5px; 
 
    padding-bottom: 5px; 
 
    opacity: 0.99; 
 
} 
 

 
.hidden { 
 
    display: none 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE HTML> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 

 

 
    <meta http-equiv="X-Ua-Compatible" content="IE=edge,chrome=1"> 
 
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&amp;subset=latin-ext" rel="stylesheet" type="text/css" /> 
 
    <!--[if lt IE 9]> 
 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script> 
 
     <![endif]--> 
 

 
</head> 
 
<header> 
 
    <h1 class="logo">some logo text</h1> 
 

 
    <nav> 
 
    <div id="mainmenu"> 
 
     <ul class="menu"> 
 
     <li><a href="#">text</a></li> 
 
     <li><a href="#">text</a></li> 
 
     <li><a href="#">text</a></li> 
 
     <li><a href="#">text</a></li> 
 
     <li><a href="#">text</a></li> 
 
     </ul> 
 
    </div> 
 
    </nav> 
 
    <nav> 
 
    <div id="mainmenuScroll" class="sticky"> 
 
     <ul class="menu"> 
 
     <li><a href="#">text</a></li> 
 
     <li><a href="#">text</a></li> 
 
     <li><a href="#">text</a></li> 
 
     <li><a href="#">text</a></li> 
 
     <li><a href="#">text</a></li> 
 
     </ul> 
 
    </div> 
 
    </nav> 
 
    <h1 class="logo">some logo text</h1> 
 
    <h1 class="logo">some logo text</h1> 
 
    <h1 class="logo">some logo text</h1> 
 
    <h1 class="logo">some logo text</h1> 
 
    <h1 class="logo">some logo text</h1> 
 
    <h1 class="logo">some logo text</h1> 
 
</header>

出典

2017-10-25 13:57:54 Joffutt4

答えをありがとう。私はJSの代わりにCSSを使用してメニューをスティッキーにするだけでこれを克服します。しかし、あなたの説明も役立ちます。悪い英語で申し訳ありません。 – 0x07

IEで開いた後にhtmlインデックスプロジェクトがクラッシュする

答えて

関連する問題