IEでページをスクロールすると途中で「メニュー」が画面に固定されるようにするための方法がうまくいきません。

ページをスクロールすると途中で「メニュー」が画面に固定されるようにするために sitckyを使っているのですが、

IEは非対応なので下記のようにCSSとJSを使って対応できるようにしたいのですが、
うまくいきません。

問題点や改善点があったら教えてください。

スクロールしたらメニューが画面に固定されてついてくるはずなのですが、win8のIE11ではスクロールしても
ついてきません。
他のブラウザでは問題なく作動しました。

下記サイトを参考にしています。
https://github.com/soenkekluth/sticky-state

下記のコードを使っています。

「スクロール前（IEでの画面です）」

「スクロールした後」

少し分かりづらいですがスクロールしました。でもIEではメニューがついてきません。

<JS> こちらのサイトのコードを使用しました。 [https://github.com/soenkekluth/sticky-state/blob/master/src/sticky-state.js](https://github.com/soenkekluth/sticky-state/blob/master/src/sticky-state.js) <HTML> ```ここに言語を入力 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>TEST</title> <link rel="stylesheet" type="text/css" href="css/all_style.css"> <link rel="stylesheet" type="text/css" href="css/test_style.css"> <link rel="stylesheet" type="text/css" href="css/sticky-state.css"> </head> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="js/sticky-state.js"></script> <body> <header class="sticky"> <nav> <h1><a href="index.html"><span>TEST</span></a></h1>  <div id="ham-menu"> <ul> <li class="menu01"><a href="concept.html"><span class="menu_title">コンセプト</span><br> <span class="menu_subtitle">CONCEPT</span></a></li> <li class="menu02"><a href="flow.html"><span class="menu_title">制作の流れ</span><br> <span class="menu_subtitle">FLOW</span></a></li> <li class="menu03"><a href="price.html"><span class="menu_title">料金</span><br> <span class="menu_subtitle">PRICE</span></a></li> <li class="menu04"><a href="company.html"><span class="menu_title">会社概要</span><br> <span class="menu_subtitle">COMPANY</span></a></li> <li class="menu05"><a href="contact.html"><span class="menu_title">お問い合わせ</span><br> <span class="menu_subtitle">CONTACT</span></a></li> </ul> </div>  </nav> </header> <div id="sub_box"> </div> </body> </html>


<CSS sticky-state>
```ここに言語を入力
.sticky {
  position: -webkit-sticky;
  position: sticky;
}

.sticky.sticky-fixed.is-sticky {
  margin-top: 0;
  margin-bottom: 0;
  position: fixed;
  -webkit-backface-visibility: hidden;
          -moz-backface-visibility: hidden;
       backface-visibility: hidden;
}

.sticky.sticky-fixed.is-sticky:not([style*="margin-top"]) {
  margin-top: 0 !important;
}
.sticky.sticky-fixed.is-sticky:not([style*="margin-bottom"]) {
  margin-bottom: 0 !important;
}


.sticky.sticky-fixed.is-absolute{
  position: absolute;
}

header {
	background-color:#fff;
	padding-bottom:20px;
	width: 100%; /* 長さ */
	top: 0; /* 固定する位置 */
	left: 0; /* 固定する位置 */
	right: 0;  /* 固定する位置 */
	box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2);
	z-index:10000;
}

header input {
	display:none;
}

header label {
	display:none;
}

h1 {
	width:250px;
	height:70px;
	background-image:url("../img/logo.jpg");
	background-repeat:no-repeat;
	margin-right:20px;
}
h1 span {
	display:none;
}
h1 a {
	display:block;
	width:250px;
	height:100%;
}


.line {
	width:100%;
	padding-top:10px;
	background:#43A1E1;
}

nav {
	padding-top:20px;
	margin:0 auto; /* ブロック要素の中央揃え */
	max-width:900px;
	scroll-behavior: smooth;
	display: -webkit-flex;
	display: flex;
	display:-ms-flex;       /* flexコンテナ化 */
	flex-direction: row; /* 横向きに配置 */
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-direction: row; /* 横向きに配置 */
	-ms-flex-wrap: wrap;
}
nav ul {
	list-style:none;
	text-align:center;
	max-width:900px;
	display: -webkit-flex;
	display: -ms-flexbox;        /* flexコンテナ化 */
	display: flex;
	flex-direction: row; /* 横向きに配置 */
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-direction: row; /* 横向きに配置 */
	-ms-flex-wrap: wrap;
}
nav .menu01, .menu02, .menu03, .menu04, .menu05 {
	width:126px;
	background-color:#FFF;
	font-weight:bold;
}
nav .menu01, .menu02, .menu03, .menu04, .menu05 {
	border-left: solid 1px #CCC;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
nav a {
	width:100%;
	display:block;
}

nav .menu_title {
	color:#43A1E1;
	font-family:M2b;
}

nav .menu_subtitle {
	color:#CCC;
	line-height:3em;
	font-family:M2p;
}
nav a:link {
	color: #333;
}
nav a:visited {
	color: #333;
}
nav a:hover {
	color: #333;
}
nav a:active {
	color: #333;
}
a {
	text-decoration:none;
}

#sub_box {
	padding-top:2050px;
        width:650px;
	border: solid #000 1px;
	margin:0 auto;
}

m.ts10806

2018/07/20 21:11

「うまく動作しない」「うまくいかない」では何が起きているか伝わりません。「○○のようになるはずなのに××となってしまう」のような形で「ゴール」と「現象（エラーメッセージなども含む）」を明確にしてください。https://teratail.com/help/question-tips#questionTips3-4-1

退会済みユーザー

2018/07/20 21:15

失礼しました。修正致します。

退会済みユーザー

2018/07/21 00:32

sitckyを使用してIE,Edgeに対応させるための改善コードが欲しいのですか？それともsitckyを使用しないでcss,javascriptを使用しての改善コードが欲しいのですか？

退会済みユーザー

2018/07/21 04:24

私もsitckyは初めての経験で勉強中なのですが、可能であれば、上記のやり方で動かない理由とsitckyを使用しないでcss,javascriptを使用しての改善コードがほしいです。お手数をおかけしますが…。