Chromeなどの一部ブラウザでposition: stickyを使うと指定した要素がスクロールとともに追従してくれます。
しかし、IEとEdgeではサポートしていないとのこと。
どうにかCSSのみで同じ動作をさせることはできないでしょうか?
「現状」
<HTML> ```ここに言語を入力 <header> <!-- line --> <div class="line"></div> <!-- line --> <nav> <!-- ham-menu --> <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> <!-- ham-menu --> </nav> </header> <!-- main_box --> <section id="main_box"> <!-- main_slide --> <div class="main_slide"> <!-- slide --> <div class="slide"><img src="img/slider/slide1.jpg" alt="img1"> <img src="img/slider/slide2.jpg" alt="img2"> <img src="img/slider/slide3.jpg" alt="img3"> <img src="img/slider/slide4.jpg" alt="img4"></div> <!-- slide --> </div> <!-- main_slide --> </section> <!-- main_box --> ``` <CSS> ```ここに言語を入力 /*ビューエリアの最小幅。このサイズより大きい場合に適用*/ @media all and (min-width: 668px) { header { background-color:#fff; padding-bottom:20px; width: 100%; /* 長さ */ position: fixed; 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:1; }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; / flexコンテナ化 /
flex-direction: row; / 横向きに配置 /
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
nav ul {
list-style:none;
text-align:center;
max-width:900px;
display: -webkit-flex;
display: flex; / flexコンテナ化 /
flex-direction: row; / 横向きに配置 */
-webkit-flex-wrap: wrap;
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;
}
#main_box {
margin-top:122px;
}
/スライダー/
/*=== 画像の表示エリア =================================(画像サイズ1160px X 600px) */
.main_slide {
position : relative;
overflow:hidden;
padding-top:122px;
margin:0 auto;
background:#f0f0f0;
}
.slide {
height: 51.7vw;
max-height: 600px;
}
.slide img {
max-width: 102%;
display: block;
position : absolute;
left:100%;
animation : slideAnime 16s ease infinite;
margin-left: 50%;
transform: translateX(-50%);
vertical-align:bottom;
}
/*=== スライドのアニメーションを段差で開始する ========= */
.slide img:nth-of-type(1) { animation-delay: 0s }
.slide img:nth-of-type(2) { animation-delay: 4s }
.slide img:nth-of-type(3) { animation-delay: 8s }
.slide img:nth-of-type(4) { animation-delay: 12s }
/*=== スライドのアニメーション ========================= */
@keyframes slideAnime{
0% { left: 100% }
2% { left: 0 }
23% { left: 0 }
25% { left: -100% }
100% { left: -100% }
}
}
IEやEdgeに対応していないのでstickyの使用をやめ、 position: fixed; を使いました。 そして、ナビゲーションバーの高さ分、スライドショーのところで ```ここに言語を入力 #main_box { margin-top:122px; }
として余白を付けました。
そうすることでスクロールするとナビゲーションバーが追従するようにはなったのですが、
スクロールしない初期状態でブラウザの画面を縮めるとナビゲーションバーが2段になったりするのですが、
その場合はスライドショーの画像にかぶってしまいます。
stickyではそういうことは起きず、ナビゲーションバーが画像にかぶらずに2段になってくれます。
「position: fixed;を使ったナビゲーションバー通常画面」
「position: fixed;を使いIEのブラウザを縮めた場合」
やはり、IEやEdgeではJqueryのStickyfillなどを使うしかないのでしょうか…。
また、
position: fixed;
を使うと、IEやEgdeではなぜか、スライドショーで表示されてはいけない画像がほんの少し見えてしまっています。
先ほどの画像の左端の黄色の部分。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/07/17 01:57
2018/07/17 02:03
退会済みユーザー
2018/07/17 03:08