アコーディオンメニューをヘッダー、フッターを除いたコンテンツ領域にのみ表示したい

実現したいこと

<div class="section s_07">～</div>で囲ったレフトナビの位置をページがスクロールされた時、top: 0;でページ最上部に固定して、フッター直前までスクロールされると、止まるという仕様を作りたいです。

前提

ヘッダー、フッターを除いたコンテンツ領域の範囲内にのみ表示させるにはどうすればよいでしょうか。

完成イメージとしては、下記サイトのレフトナビのような感じです。
https://www.gran-turismo.com/jp/gt7/manual/

またレフトナビはアコーディオン形式で作成しており、
「大カテゴリ→中カテゴリ→小カテゴリ」のように3階層の構造になっています。
レフトナビの高さはコンテンツ領域の高さと同じにしたいです。

発生している問題・エラーメッセージ

スクロールした際、ヘッダーは流れるのですが、フッター部分に重なり、フッターの上にサイドバーのコンテンツが表示されます。

該当のソースコード

html
1<body>
2<div class="wrapper">
3  <header>
4    <div class="l-header-inner"><a href=""><img src=""></a> </div>
5  </header>
6  <div class="container"> 
7      <div class="section s_07">
8        <div class="accordion_one">
9          <div class="accordion_header">大カテゴリ
10          </div>
11          <div class="accordion_inner">
12            <div class="accordion_one">
13              <div class="accordion_header">中カテゴリ
14                <div class="i_box"><i class="one_i"></i></div>
15              </div>
16              <div class="accordion_inner">
17                <div class="accordion_one">
18                  <div class="accordion_header">小カテゴリ</div>
19                  <div class="accordion_header">小カテゴリ</div>
20                  <div class="accordion_header">小カテゴリ</div>
21                  <div class="accordion_header">小カテゴリ</div>
22                  <div class="accordion_header">小カテゴリ</div>
23                </div>
24              </div>
25            </div>
26          </div>
27        </div>
28      </div>
29      <main class="content-wrap">
30      </main>
31    </div>
32  <footer id="js-footer" class="l-footer">
33    <div class="l-footer-copy">
34      <p style="text-align: center">copyright</p>
35    </div>
36  </footer>
37</div>
38<script src="js/gmenu.js"></script>
39<script>
40$(function() {
41  let target = $(".s_07").offset().top;
42  $(window).on("scroll", function() {
43    let currentPos = $(window).scrollTop();
44    if(currentPos > target) {
45      $(".s_07").addClass('sticky');
46    } else{
47      $(".s_07").removeClass('sticky');
48    }
49  });
50});
51</script>
52</body>

css
1.container{
2    display: flex;
3	min-height: 100vh;
4}
5main{
6    width:100%;
7    padding:4%;
8    color: #FFF;
9}
10.content-wrap:before{
11    content: '';
12    position: absolute;
13    background: rgb(0,0,0,.6);
14    width: 100%;
15    height: 100%;
16    top: 0;
17    left: 0;
18    z-index: -1;
19}
20#ac-menu .label::before,
21#ac-menu .label::after {
22    content: '';
23    width: 10px;
24    height: 2px;
25    background: #FFF;
26    position: absolute;
27    top: 50%;
28    right: 4%;
29    transform: translateY(-50%);
30}
31#ac-menu .label::after {
32    transform: translateY(-50%) rotate(90deg);
33    transition: .5s;
34}
35#ac-menu .label.open {
36  background-color: #999;
37}
38#ac-menu .label.open::before {
39  opacity: 0;
40}
41#ac-menu .label.open::after {
42  transform: rotate(180deg);
43}
44.s_07 .accordion_one {
45  max-width: 1024px;
46  margin: 0 auto;
47}
48.s_07 .accordion_one .accordion_header {
49  background-color: #000;
50  border-bottom: 1px solid #fff;
51  color: #fff;
52  font-size: 14px;
53  font-weight: bold;
54  padding: 20px;
55  position: relative;
56  z-index: +1;
57  cursor: pointer;
58  transition-duration: 0.2s;
59}
60.s_07 .accordion_one .accordion_header .i_box {
61  display: flex;
62  justify-content: center;
63  align-items: center;
64  position: absolute;
65  top: 50%;
66  right: 5%;
67  width: 40px;
68  height: 40px;
69  margin-top: -20px;
70  box-sizing: border-box;
71  -webkit-transform: rotate(45deg);
72  transform: rotate(45deg);
73  transform-origin: center center;
74  transition-duration: 0.2s;
75}
76.s_07 .accordion_one .accordion_header .i_box .one_i {
77  display: block;
78  width: 18px;
79  height: 18px;
80  -webkit-transform: rotate(45deg);
81  transform: rotate(45deg);
82  transform-origin: center center;
83  transition-duration: 0.2s;
84  position: relative;
85}
86.s_07 .accordion_one .accordion_header.open .i_box {
87  -webkit-transform: rotate(-360deg);
88  transform: rotate(-360deg);
89}
90.s_07 .accordion_one .accordion_header .i_box .one_i:before, .s_07 .accordion_one .accordion_header .i_box .one_i:after {
91  display: flex;
92  content: '';
93  background-color: #fff;
94  border-radius: 10px;
95  width: 18px;
96  height: 4px;
97  position: absolute;
98  top: 7px;
99  left: 0;
100  -webkit-transform: rotate(0deg);
101  transform: rotate(0deg);
102  transform-origin: center center;
103}
104.s_07 .accordion_one .accordion_header .i_box .one_i:before {
105  width: 4px;
106  height: 18px;
107  top: 0;
108  left: 7px;
109}
110.s_07 .accordion_one .accordion_header.open .i_box .one_i:before {
111  content: none;
112}
113.s_07 .accordion_one .accordion_header.open .i_box .one_i:after {
114  -webkit-transform: rotate(-45deg);
115  transform: rotate(-45deg);
116}
117.s_07 .accordion_one .accordion_inner {
118  display: none;
119  padding: 0;
120  box-sizing: border-box;
121}
122.s_07 .accordion_one .accordion_inner .box_one {
123  height: 300px;
124}
125.s_07 .accordion_one .accordion_inner p.txt_a_ac {
126  margin: 0;
127}
128.section {
129  width: 100%;
130  max-width: 455px;
131  overflow: auto;
132  height: 100vh;
133  position: relative;
134  background: #1c1c1c;
135  z-index: 999999;
136}
137
138.sticky{
139  position: fixed;
140  top: 0;
141  left: 0;
142}

javascript
1$(function(){
2  $('.s_07 .accordion_one .accordion_header').click(function(){
3    $(this).next('.accordion_inner').slideToggle();
4    $(this).toggleClass("open");
5  });
6});

試したこと

.sectionに対してheight: 100%を指定すれば、
コンテンツ領域まで伸びるかと思ったのですが、
フッターまで伸びてしまいます。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

よくわかりませんが、ご希望のことは、CSSの position: sticky; でできそうなことかと推測。

html
1<div class="wrapper">
2  <header>
3    <p>header</p>
4  </header>
5  <div class="container">
6    <div class="s_07">
7      <p>nav</p>
8    </div>
9    <main class="content-wrap">
10      <p>main</p>
11    </main>
12  </div>
13  <footer>
14    <p>footer</p>
15  </footer>
16</div>

css
1body {
2  margin: 0;
3}
4header, footer {
5  height: 50px;
6}
7.container {
8  display: flex;
9  min-height: 100vh;
10  background: rgb(0, 0, 0, 0.6);
11  color: #fff;
12}
13main {
14  width: 100%;
15  height: 200vh;
16}
17.section {
18  width: 100%;
19  max-width: 455px;
20  overflow: auto;
21  height: 100vh;
22  position: relative;
23  background: #1c1c1c;
24  z-index: 999999;
25}
26
27.s_07 {
28  position: sticky;
29  top: 0;
30  width: 100%;
31  max-width: 455px;
32  overflow: auto;
33  height: calc(100vh - 50px);
34  background: #1c1c1c;
35}

【CSS】position: sticky; の使い方と効かない場合の対処法を解説 | ZeroPlus Media

投稿2023/02/23 05:21

hatena19

総合スコア34360

non-non

2023/02/23 07:25

ご回答ありがとうございます。概ね思い通りのデザインになりました。 1点お聞きしたいのですが、 .content-wrap:beforeのbackground: rgb(0,0,0,.6);を content-wrapと同じ高さ分適用させたいのですが、ご教授いただいてもよろしいでしょうか。現在、content-wrapの高さが、.content-wrap:beforeを上回ってしまい、はみ出してしまいます。