お世話になります。
jQueryを使用し、
ドロワーメニューを作成したのですが、
ドロワーメニューの高さが画面に高さより高い場合、
一定以上下にスクロールができない状態になっております。
下記に関連するコードを記します。
html
1<!doctype html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0"> 6<title>aaa</title> 7<link rel="stylesheet" href="css/reset.css"> 8<link rel="stylesheet" href="css/nav-slide.css"> 9<link rel="stylesheet" href="css/top.css"> 10<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 11</head> 12<body id="top"> 13<div class="wrapper"> 14<header> 15<div id="header"> 16 <div class="header-logo"> 17 <a href="#"><img src="img/header-logo.png" alt=""></a> 18 </div> 19</div> 20 <div class="menu-trigger" href=""> 21 <span></span> 22 <span></span> 23 <span></span> 24 </div> 25<nav> 26 <ul class="g-nav"> 27 <li>aaa</li> 28 <li>aaa</li> 29 <li>aaa</li> 30 <li>aaa</li> 31 <li>aaa</li> 32 <li>aaa</li> 33 <li>aaa</li> 34 <li>aaa</li> 35 <li>aaa</li> 36 </ul> 37</nav> 38 <div class="overlay"></div> 39</header> 40</div> 41</body> 42</html> 43
css1
1@charset "UTF-8"; 2/* CSS Document */ 3.wrapper { 4 height: 100%; 5 position: relative; 6} 7.overlay { 8 content: ""; 9 display: block; 10 width: 0; 11 height: 0; 12 background-color: rgba(0, 0, 0, 0.5); 13 position: absolute; 14 top: 0; 15 left: 0; 16 z-index: 50; 17 opacity: 0; 18 transition: opacity .5s; 19} 20.overlay.open { 21 width: 100%; 22 height: 100vh; 23 opacity: 1; 24} 25 26.menu-trigger { 27 display: inline-block; 28 width: 30px; 29 height: 28px; 30 vertical-align: middle; 31 cursor: pointer; 32 position: fixed; 33 top: 50px; 34 right: 70px; 35 z-index: 150; 36/* transform: translateX(0); 37 transition: transform .5s; 38 */} 39/* .menu-trigger.active { 40 transform: translateX(-250px); 41} 42 */.menu-trigger span { 43 display: inline-block; 44 box-sizing: border-box; 45 position: absolute; 46 left: 0; 47 width: 100%; 48 height: 1px; 49 background-color: #fff; 50 transition: all .5s; 51} 52.menu-trigger.active span { 53 background-color: #fff; 54} 55.menu-trigger span:nth-of-type(1) { 56 top: 0; 57} 58.menu-trigger.active span:nth-of-type(1) { 59 transform: translateY(13px) rotate(-45deg); 60} 61.menu-trigger span:nth-of-type(2) { 62 top: 13px; 63} 64.menu-trigger.active span:nth-of-type(2) { 65 opacity: 0; 66} 67.menu-trigger span:nth-of-type(3) { 68 bottom: 0; 69} 70.menu-trigger.active span:nth-of-type(3) { 71 transform: translateY(-13.5px) rotate(45deg); 72} 73 74nav { 75 width: 350px; 76 height: 100%; 77 padding-top: 105px; 78 background-color: rgb(35, 36, 42, 0.9); 79 position: fixed; 80 top: 0; 81 right: 0; 82 z-index: 100; 83 transform: translate(350px); 84 transition: all .5s; 85} 86nav.open { 87 transform: translateZ(0); 88 overflow: auto; 89} 90
css2
1@charset "UTF-8"; 2 3body { 4 width: 100%; 5 font-size: 14px; 6 position: relative; 7} 8 9body.fixed{ 10 position: fixed; 11 width:100%; 12} 13 14img { 15 width:100%; 16} 17 18header { 19 display: block; 20 position: fixed; 21 top: 0; 22 left: 0; 23 z-index: 1; 24 width: 100%; 25} 26 27header .header-logo { 28 width: 180px; 29 margin: 50px 0 0 70px; 30} 31 32ul.g-nav { 33 list-style: none; 34 padding-left: 60px; 35}
js
1$('.menu-trigger').on('click',function(){ 2 if($(this).hasClass('active')){ 3 $(this).removeClass('active'); 4 $('nav').removeClass('open'); 5 $('.overlay').removeClass('open'); 6 } else { 7 $(this).addClass('active'); 8 $('nav').addClass('open'); 9 $('.overlay').addClass('open'); 10 } 11}); 12$('.overlay').on('click',function(){ 13 if($(this).hasClass('open')){ 14 $(this).removeClass('open'); 15 $('.menu-trigger').removeClass('active'); 16 $('nav').removeClass('open'); 17 } 18}); 19 20 21var state = false; 22var scrollpos; 23$('.menu-trigger').on('click', function(){ 24 if(state == false) { 25 scrollpos = $(window).scrollTop(); 26 $('body').addClass('fixed').css({'top': -scrollpos}); 27 state = true; 28 } else { 29 $('body').removeClass('fixed').css({'top': 0}); 30 window.scrollTo( 0 , scrollpos ); 31 state = false; 32 } 33});
長々と申し訳ありません。
nav や nav.open に overflow:auto や scroll を指定しても変わらず、で途方に暮れています。
ドロワーメニューの作り方を参考に作成し、背景の固定方法ではこちらを参考にしました。
やりたいこと
画面の高さに関係なくドロワーメニューをスクロールしたいと考えております。
ヒント等をご教示いただけますと幸いです。
情報の不足がございましたらお知らせください。
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/06/08 06:33