フルスクリーンナビゲーションを実装したい

現状

画面サイズに応じて表示レイアウトを変えていて、1100px以上なら左固定サイドメニューを表示させ、以下ならハンバーガーアイコンを表示させています。
今回1100px以下にしたときのメニュー表示ではフルスクリーンナビゲーションを採用しています。
また、ハンバーガーアイコンをクリックしたときの挙動はjQueryを採用しています。※jQuery部分のコードは割愛

発生している問題

スクロールしたときにハンバーガーアイコンをクリックするとメニューの文字が消えてしまう
理想としては、どの位置でスクロールしても「MENU1」がちゃんと見える・背景色の水色が画面いっぱいに表示されてほしいですが今のコードだとそれが実現できていません。
一番下までスクロールしたときに、ハンバーガーアイコンをクリックすると[現状]に記載している図のように何も表示されされなくなってしまいました。
この現象を解決するためにはどのようにCSSを直せば良いでしょうか？
お手数をおかけしますが、よろしくお願いいたします。

[理想イメージ]

[現状]

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<body>
4	<div id="header">
5		<div id="logo">ロゴ画像</div>
6
7		<!-- /ハンバーガーアイコン -->
8		<div id="menu-trigger">
9			<span class="top"></span>
10			<span class="middle"></span>
11			<span class="bottom"></span>
12		</div>
13
14		<div id="top">
15			<div id="top_title">タイトル</div>
16			<div id="index">
17				<h2>サブタイトル</h2>
18				<p>サンプルテキストサンプルテキストサンプルテキスト</p>
19			</div>
20		</div><!-- /#top -->
21
22	</div><!-- /#header -->
23
24<!-- /アコーディオンメニュー -->
25	<div id="accordion" class="accordion-container">
26
27		<!----------------------MENU1---------------------------->
28		<h2 class="accordion-title js-accordion-title ">MENU1</h2>
29		<div class="accordion-content">
30			<a href="#"><p>AAAA</p></a>
31			<a href="#"><p>BBBB</p></a>
32			<a href="#"><p>CCC</p></a>
33			<a href="#"><p>CCC</p></a>
34			<a href="#"><p>DDD</p></a>
35			<a href="#"><p>EEE</p></a>
36			<a href="#"><p>FFF</p></a>
37		</div><!--/.accordion-content-->
38
39		<!----------------------MENU2---------------------------->
40		<h2 class="accordion-title js-accordion-title ">MENU2</h2>
41		<div class="accordion-content">
42			<a href="#"><p>AAAA</p></a>
43			<a href="#"><p>BBBB</p></a>
44			<a href="#"><p>CCC</p></a>
45			<a href="#"><p>CCC</p></a>
46			<a href="#"><p>DDD</p></a>
47			<a href="#"><p>EEE</p></a>
48			<a href="#"><p>FFF</p></a>
49			<a href="#"><p>AAAA</p></a>
50			<a href="#"><p>BBBB</p></a>
51			<a href="#"><p>CCC</p></a>
52			<a href="#"><p>CCC</p></a>
53			<a href="#"><p>DDD</p></a>
54
55		</div><!--/.accordion-content-->
56
57		<!----------------------MENU3---------------------------->
58		<h2 class="accordion-title js-accordion-title ">MENU3</h2>
59		<div class="accordion-content">
60			<a href="#"><p>AAAA</p></a>
61			<a href="#"><p>BBBB</p></a>
62			<a href="#"><p>CCC</p></a>
63			<a href="#"><p>CCC</p></a>
64			<a href="#"><p>DDD</p></a>
65			<a href="#"><p>EEE</p></a>
66			<a href="#"><p>FFF</p></a>
67		</div><!--/.accordion-content-->
68	</div><!--/#accordion .accordion-container-->
69
70	<!-- /コンテンツ -->
71	<div id="contents">
72		<div class="card">
73			<h1>タイトル</h1>
74			<p>サンプルテキスト</p>
75			<p>サンプルテキストサンプルテキスト</p>
76		</div>
77		<div class="card">
78			<h1>タイトル</h1>
79			<p>サンプルテキスト</p>
80			<p>サンプルテキストサンプルテキスト</p>
81		</div>
82		<div class="card">
83			<h1>タイトル</h1>
84			<p>サンプルテキスト</p>
85			<p>サンプルテキストサンプルテキスト</p>
86		</div>
87		<div class="card">
88			<h1>タイトル</h1>
89			<p>サンプルテキスト</p>
90			<p>サンプルテキストサンプルテキスト</p>
91		</div>
92		<div class="card">
93			<h1>タイトル</h1>
94			<p>サンプルテキスト</p>
95			<p>サンプルテキストサンプルテキスト</p>
96		</div>
97		<div class="card">
98			<h1>タイトル</h1>
99			<p>サンプルテキスト</p>
100			<p>サンプルテキストサンプルテキスト</p>
101		</div>
102		<div class="card">
103			<h1>タイトル</h1>
104			<p>サンプルテキスト</p>
105			<p>サンプルテキストサンプルテキスト</p>
106		</div>
107		<div class="card">
108			<h1>タイトル</h1>
109			<p>サンプルテキスト</p>
110			<p>サンプルテキストサンプルテキスト</p>
111		</div>
112		<div class="card">
113			<h1>タイトル</h1>
114			<p>サンプルテキスト</p>
115			<p>サンプルテキストサンプルテキスト</p>
116		</div>
117		<div class="card">
118			<h1>タイトル</h1>
119			<p>サンプルテキスト</p>
120			<p>サンプルテキストサンプルテキスト</p>
121		</div>
122		<div class="card">
123			<h1>タイトル</h1>
124			<p>サンプルテキスト</p>
125			<p>サンプルテキストサンプルテキスト</p>
126		</div>
127		<div class="card">
128			<h1>タイトル</h1>
129			<p>サンプルテキスト</p>
130			<p>サンプルテキストサンプルテキスト</p>
131		</div>
132		<div class="card">
133			<h1>タイトル</h1>
134			<p>サンプルテキスト</p>
135			<p>サンプルテキストサンプルテキスト</p>
136		</div>
137		<div class="card">
138			<h1>タイトル</h1>
139			<p>サンプルテキスト</p>
140			<p>サンプルテキストサンプルテキスト</p>
141		</div>
142		<div class="card">
143			<h1>タイトル</h1>
144			<p>サンプルテキスト</p>
145			<p>サンプルテキストサンプルテキスト</p>
146		</div>
147		<div class="card">
148			<h1>タイトル</h1>
149			<p>サンプルテキスト</p>
150			<p>サンプルテキストサンプルテキスト</p>
151		</div>
152		<div class="card">
153			<h1>タイトル</h1>
154			<p>サンプルテキスト</p>
155			<p>サンプルテキストサンプルテキスト</p>
156		</div>
157		<div class="card">
158			<h1>タイトル</h1>
159			<p>サンプルテキスト</p>
160			<p>サンプルテキストサンプルテキスト</p>
161		</div>
162	</div><!-- /#contents -->
163
164	<script src="script.js"></script>
165</body>
166</html>

CSS
1*{
2	margin: 0;
3	padding: 0;
4	text-decoration: none;
5	transition: .2s;
6	border: 0;
7	font-size: 100%;
8	font: inherit;
9	vertical-align: baseline;
10}
11*,*::before,*::after {
12	box-sizing: border-box;
13}
14html{
15	font-size:62.5%;
16	box-sizing: border-box;
17	position: relative;
18}
19body{
20	font-size:1.6rem;
21	display: flex;
22	flex-flow: column;
23	line-height: 1;
24}
25a{
26	text-decoration: none;
27	color: #000;
28}
29#header{
30	display: flex;
31	position: fixed;
32	width: 100%;
33	z-index: 100;
34	height: 10.5rem;
35}
36#logo{
37	display: none;
38}
39#top{
40	background-color: #fc0;
41	width: 100%;
42	height: 10.5rem;
43}
44#top_title{
45	text-align: center;
46	font-size: 3rem;
47	padding-top: 1rem;
48}
49#index{
50	text-align: center;
51}
52#index h2{
53	padding-top: 1.5rem;
54	font-size: 1.8rem;
55}
56#index p{
57	padding-top: 1rem;
58}
59/*ハンバーガーアイコン*/
60#menu-trigger,#menu-trigger span {
61	transition: all .4s;
62	box-sizing: border-box;
63	background-color: #fc0;
64}
65#menu-trigger {
66	position: relative;
67	width: 5.5rem;
68	height: 10.5rem;
69}
70#menu-trigger:hover{
71	cursor: pointer;
72}
73#menu-trigger::after {
74	position: absolute;
75	left: 1.5rem;
76	top: 2rem;
77	content: 'MENU';
78	display: block;
79	width: 100%;
80	color: #000;
81	font-size: 1.2rem;
82	text-decoration: none;
83	text-align: center;
84	white-space: nowrap;
85}
86#menu-trigger span {
87	position: absolute;
88	width: 100%;
89	height: 3px;
90	background-color: #000;
91	border-radius: 4px;
92}
93.top {
94	top: 4.2rem;
95	left: 1.5rem;
96}
97.middle {
98	top: 5.8rem;
99	left: 1.5rem;
100}
101.bottom{
102	top: 7.5rem;
103	left: 1.5rem;
104}
105/*✕になるときのCSS*/
106.top.active{
107	top:5.6rem;
108	transform: rotate(-45deg);
109}
110.middle.active{
111	display:none;
112}
113.bottom.active{
114	top: 5.6rem;
115	transform: rotate(45deg) !important;
116}
117/*ハンバーガーアイコン ここまで*/
118/*アコーディオンメニュー非表示*/
119#accordion{
120	display:none;
121}
122
123/*ハンバーガーメニューを押したらメニュー表示*/
124#accordion.active{
125	display:block;
126	position: absolute;
127	width: 100%;
128	height: 100%;
129	margin-top:10.5rem;
130	padding-top:2rem;
131	padding-left: 5rem;
132	z-index: 99;
133	background-color: #e3f2fd;
134}
135#accordion.active h2,#accordion.active h3,#accordion.active p{
136	text-align: center;
137}
138#accordion.active h2{
139	font-size: 2rem;
140	font-weight: bold;
141	padding-top: 3rem;
142}
143#accordion.active h3{
144	padding-top: .7rem;
145	color:#369;
146	font-weight: bold;
147}
148#accordion.active p{
149	padding-top: 1rem;
150}
151#accordion.active p:hover{
152	color:#fff;
153	text-shadow: .1rem .1rem .1rem #999999;
154}
155.accordion-content.active{
156	padding-bottom: 1rem;
157}
158.card{
159	border: .1rem solid #000;
160	width:30rem;
161	height: 30rem;
162	padding:1rem;
163}
164.card h1{
165	font-size: 2rem;
166	font-weight: bold;
167}
168.card p{
169	padding-top: .5rem;
170}
171#contents{
172	display:flex;
173	position: relative;
174	flex-wrap: wrap;
175	width:900px;
176	margin:15rem auto;
177}
178
179/*・・・・・・・・・・・・・・・・・・・・・・・・・・左固定サイドメニューバー・・・・・・・・・・・・・・・・・・・・・・・・・・*/
180@media screen and (min-width:1100px){
181	body{
182		padding-left:20rem;
183	}
184	#header{
185		display: flex;
186		position: fixed;
187		top:0;
188		left: 0;
189		width: 100%;
190		height: 100%;
191	}
192	#header a{
193		display:block;
194	}
195	#logo{
196		display: block !important;
197		width: 23rem;
198		height:10.5rem;
199		background-color: #fcc;
200	}
201	/*ハンバーガーアイコンを無効化*/
202	#menu-trigger{
203		display:none;
204	}
205	/*アコーディオンメニュー*/
206	#accordion{
207		display:block !important;
208		position: fixed;
209		left: 0;
210		margin-top: 10rem;
211		height: 100%;
212		z-index: 99;
213	}
214	.accordion-container {
215		width: 20rem;
216		background-color: #015190;
217		color:#fff;
218	}
219	.accordion-container .accordion-title {
220		cursor: pointer;
221	}
222	.accordion-title:hover{
223		color: #015190;
224		background-color: #fff;
225	}
226	.accordion-container h2{
227		position: relative;
228		font-size: 2.2rem;
229		padding:1rem;
230		padding-left: 2rem;
231		font-weight: bold;
232	}
233	.accordion-container h3{
234		position: relative;
235		padding:1rem;
236		font-size: 1.4rem;
237		padding-left:.7rem;
238	}
239	/*矢印ボタン*/
240	.accordion-title:after {
241		content: "";
242		position: absolute;
243		right: 25px;
244		top: 30%;
245		transition: all 0.2s ease-in-out;
246		display: block;
247		width: 1rem;
248		height: 1rem;
249		border-top: solid 2px #fff;
250		border-right: solid 2px #fff;
251		-webkit-transform: rotate(135deg);
252		transform: rotate(135deg);
253	}
254	.accordion-title:hover:after{
255		border-top: solid 2px #015190;
256		border-right: solid 2px #015190;
257	}
258	.accordion-title.open:after {
259		-webkit-transform: rotate(-45deg);
260		transform: rotate(-45deg);
261		top: 45%;
262	}
263	.sub:after {
264		content: "";
265		position: absolute;
266		right: 15px;
267		top: 30%;
268		transition: all 0.2s ease-in-out;
269		display: block;
270		width: 1rem;
271		height: 1rem;
272		border-top: solid 2px #000;
273		border-right: solid 2px #000;
274		-webkit-transform: rotate(135deg);
275		transform: rotate(135deg);
276	}
277	.sub.open:after {
278		-webkit-transform: rotate(-45deg);
279		transform: rotate(-45deg);
280		top: 45%;
281	}
282	.accordion-content {
283		display: none;
284	}
285	.accordion-content p{
286		padding:1rem;
287		font-size: 1.4rem;
288		text-align: center;
289	}
290	.accordion-content p:hover{
291		color:#015190;
292		font-weight: bold;
293	}
294	.accordion-content h3{
295		color:#000;
296		font-weight: bold;
297	}
298	.accordion-content.open{
299		background-color: #ffffef;
300	}
301	#index p{
302		margin:0 2.5rem !important;
303	}
304
305}
306

行動規範の内容に同意します

回答1件

ベストアンサー

下記のコードでどうでしょう。

css
1#accordion.active{
2    display:block;
3/*    position: absolute;  */
4    position: fixed; /* absolute を fixed に修正 */
5    overflow: Auto; /* 画面高がメニューより小さいときはスクロールできるように */
6    width: 100%;
7    height: 100%;
8    margin-top:10.5rem;
9    padding-top:2rem;
10    padding-left: 5rem;
11    z-index: 99;
12    background-color: #e3f2fd;
13}

投稿2020/11/05 11:23

編集2020/11/06 02:12

hatena19

総合スコア33782

itzuakniami123

2020/11/06 01:59

すみません、記述量が多く、文字数のせいでjQuery部分のコードの記載ができませんでした…。 jQueryの記述は以下になります。 ```jQuery //メニュー画面アコーディオンメニュー $(function(){ //ハンバーガーアイコン $("#menu-trigger").on("click",function(){ //activeクラスを付与 $(".top").toggleClass("active"); $(".middle").toggleClass("active"); $(".bottom").toggleClass("active"); $("#accordion").toggleClass("active"); $(".accordion-content").toggleClass("active"); }); }); ```