前提・実現したいこと
cssでトグルナビを作り、クリックでフルスクリーンメニューが表示されるようにしました。
しかし、スクロールすると画面いっぱいに表示設定しているはずの背景色が途切れてしまいます。
スクロールしても背景色が途切れず、下の要素が見えないようにするにはどうしたらいいでしょうか?
該当のソースコード
HTML
1 <nav class="menu"> 2 <div class="strokes"></div> 3 <div class="strokes"></div> 4 <div class="strokes"></div> 5 </nav> 6 <div class="fullscreenmenu"> 7 <div class="list-box"> 8 <ul> 9 <li>タイトル</li> 10 <li>テスト</li> 11 </ul> 12 <ul> 13 <li>タイトル</li> 14 <li>テスト</li> 15 </ul> 16 <ul> 17 <li>タイトル</li> 18 <li>テスト</li> 19 </ul> 20 </div> 21 </div> 22 23 <main> 24 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 25 </main> 26 27<script src="https://cdn.jsdelivr.net/jquery/1.12.4/jquery.min.js"></script>
css
1nav.menu{ 2 position:absolute; 3 width: 80px; 4 height: 80px; 5 top: 0; 6 right: 0; 7 margin: 0; 8 cursor: pointer; 9 background:#45454a; 10 z-index: 9999; 11} 12nav.menu div.strokes { 13 width: 40%; 14 height: 4px; 15 margin: 7px auto 7px auto; 16 background: white; 17 border-radius: 10px; 18 transition: transform 0.3s, opacity 0.1s; 19} 20nav.menu div.strokes:first-child { 21 margin-top: 28px; 22} 23.hide{ 24 opacity: 0; 25 transform: translateX(-42px); 26} 27 28.animate0{ 29 transform: translateY(13px) rotate(45deg); 30} 31 32.animate2{ 33 transform: translateY(-10px) rotate(-45deg); 34} 35 36.fullscreenmenu{ 37 background-color: rgba(0, 93, 90, 0); 38 top: 0; 39 left: 0; 40 width: 100%; 41 height: 100vh; 42 position: absolute; 43 opacity: 0; 44 -webkit-transition: background 0.5s ease-in-out, opacity 0.5s; 45 -moz-transition: background 0.5s ease-in-out, opacity 0.5s; 46 -ms-transition: background 0.5s ease-in-out, opacity 0.5s; 47 -o-transition: background 0.5s ease-in-out, opacity 0.5s; 48 transition: background 0.5s ease-in-out, opacity 0.5s; 49 text-align: center; 50 pointer-events: none; 51} 52.fullscreenmenu.show{ 53 height: 100vh !important; 54 opacity: 1; 55 background-color: rgba(69,69,74, 1); 56 -webkit-transition: background 0.5s ease-in-out, visibility 0.5s; 57 -moz-transition: background 0.5s ease-in-out, visibility 0.5s; 58 -ms-transition: background 0.5s ease-in-out, visibility 0.5s; 59 -o-transition: background 0.5s ease-in-out, visibility 0.5s; 60 transition: background 0.5s ease-in-out, visibility 0.5s; 61 z-index: 9998; 62 pointer-events: auto; 63 overflow-y: scroll; 64} 65.list-box { 66 display: flex; 67 flex-direction: row; 68 justify-content: center; 69 align-items: center; 70 box-sizing: border-box; 71 width: 100%; 72 height: 100vh; 73} 74.list-box ul { 75 height: 250px; 76 padding: 0 20px; 77}
JavaScript
1(function () { 2 "use strict"; 3 4 var fullscreenmenu = document.querySelector(".fullscreenmenu"); 5 6 var strokes = document.querySelectorAll(".strokes"), 7 icon = document.querySelector(".menu"), 8 fullscreenmenu = document.querySelector(".fullscreenmenu"); 9 10 function transformStart() { 11 12 strokes[0].classList.toggle("animate0") 13 strokes[1].classList.toggle("hide"); 14 strokes[2].classList.toggle("animate2"); 15 fullscreenmenu.classList.toggle("show"); 16 17 } 18 19 icon.addEventListener("click", transformStart); 20 21})();
試したこと
・100vhに!importantを設定(変化なし)
・z-indexの数値を変更(変化なし)
100vhにしているはずなのになぜ途切れてしまうのかがわかりません…
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/01/19 07:58