【概要】
スマホでの、スクロールの際、メニューバーを固定しスクロールしてもついてくる様にしたいのですが、スクロールした際には、消えてしまいました。
試したコード
html
1<header> 2<link rel="stylesheet" type="text/css" href="ham-01.css"> 3 <div id="nav-drawer"> 4 <input id="nav-input" type="checkbox" class="nav-unshown"> 5 <label id="nav-open" for="nav-input"><span></span></label> 6 <label class="nav-unshown" id="nav-close" for="nav-input"></label> 7 <div id="nav-content"> 8 <a href="ev_index.html">HOME</a> 9 <a href="ev_school.html">SCHOOL</a> 10 <a href="ev_access.html">ACCESS</a> 11 <a href="ev_exp.html">EVENT</a> 12 <a href="#">ABOUT THIS SITE</a> 13 </div> 14</header>
css
1 header { 2 padding:10px; 3 /*background: skyblue;*/ 4 } 5 #nav-content a { 6 display: block; 7 text-align: center; 8 width: 80%; 9 max-width: 300px; 10 margin: 1rem auto; 11 padding: 0.5rem 0; 12 background: #777; 13 color: #fff; 14 font-famile: sans-serif; 15 text-decoration: none 16 } 17 #nav-drawer { 18 position: relative; 19 } 20 21 /*チェックボックス等は非表示に*/ 22 .nav-unshown { 23 display:none; 24 } 25 26 /*アイコンのスペース*/ 27 #nav-open { 28 display: inline-block; 29 width: 30px; 30 height: 22px; 31 vertical-align: middle; 32 } 33 34 /*ハンバーガーアイコンをCSSだけで表現*/ 35 #nav-open span, #nav-open span:before, #nav-open span:after { 36 position: absolute; 37 height: 3px;/*線の太さ*/ 38 width: 25px;/*長さ*/ 39 border-radius: 3px; 40 background: #555; 41 display: block; 42 content: ''; 43 cursor: pointer; 44 } 45 #nav-open span:before { 46 bottom: -8px; 47 } 48 #nav-open span:after { 49 bottom: -16px; 50 } 51 52 /*閉じる用の薄黒カバー*/ 53 #nav-close { 54 display: none;/*はじめは隠しておく*/ 55 position: fixed; 56 z-index: 99; 57 top: 0;/*全体に広がるように*/ 58 left: 0; 59 width: 100%; 60 height: 100%; 61 background: black; 62 opacity: 0; 63 transition: .3s ease-in-out; 64 } 65 66 /*中身*/ 67 #nav-content { 68 overflow: auto; 69 position: fixed; 70 top: 0; 71 left: 0; 72 z-index: 9999;/*最前面に*/ 73 width: 90%;/*右側に隙間を作る(閉じるカバーを表示)*/ 74 max-width: 330px;/*最大幅(調整してください)*/ 75 height: 100%; 76 background: #333;/*背景色*/ 77 transition: .3s ease-in-out;/*滑らかに表示*/ 78 -webkit-transform: translateX(-105%); 79 transform: translateX(-105%);/*左に隠しておく*/ 80 } 81 82 /*チェックが入ったらもろもろ表示*/ 83 #nav-input:checked ~ #nav-close { 84 display: block;/*カバーを表示*/ 85 opacity: .5; 86 } 87 88 #nav-input:checked ~ #nav-content { 89 -webkit-transform: translateX(0%); 90 transform: translateX(0%);/*中身を表示(右へスライド)*/ 91 box-shadow: 6px 0 25px rgba(0,0,0,.15); 92 } 93 94 body{ 95 background: #81bcd8; 96} 97.site-header{ 98 background: #fff; 99 display: flex; 100 padding: 60px 20px; 101 position: fixed; 102 justify-content: space-between; 103 width: 100%; 104} 105.site-logo img{ 106 height: 20px; 107 width: auto; 108} 109.gnav__menu{ 110 display: flex; 111} 112.gnav__menu__item{ 113 margin-left: 20px; 114} 115.gnav__menu__item a{ 116 color: #333; 117 text-decoration: none; 118} 119.hero{ 120 max-height: 500px; 121 overflow: hidden; 122} 123.hero img{ 124 height: auto; 125 width: 100%; 126} 127.content{ 128 line-height: 1.6; 129 margin: 0 auto; 130 padding-top: 100px; 131 width: 800px; 132} 133.content p{ 134 margin-bottom: 40px; 135} 136.site-footer{ 137 background: #333; 138 padding: 80px 0; 139} 140.copyright{ 141 color: #fff; 142 font-size: 12px; 143 text-align: center; 144}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2019/08/16 06:54
退会済みユーザー
2019/08/16 06:57