Q&A
実現したいこと
<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件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2023/02/23 07:25
2023/02/23 08:20
2023/02/23 09:40