ページをスクロールすると途中で「メニュー」が画面に固定されるようにするために sitckyを使っているのですが、
IEは非対応なので下記のようにCSSとJSを使って対応できるようにしたいのですが、
うまくいきません。
問題点や改善点があったら教えてください。
スクロールしたらメニューが画面に固定されてついてくるはずなのですが、win8のIE11ではスクロールしても
ついてきません。
他のブラウザでは問題なく作動しました。
下記サイトを参考にしています。
https://github.com/soenkekluth/sticky-state
下記のコードを使っています。
「スクロールした後」
少し分かりづらいですがスクロールしました。でもIEではメニューがついてきません。
<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; }
<CSS sticky-state以外>
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; }
回答1件
あなたの回答
tips
プレビュー