コンテンツが埋もれる

Question

現在サイドメニューを指定位置で固定してフッターに来たら止める処理を行っているのですが、
動的コンテンツが入るとどうしてもフッターの下に埋もれてしまいます。

＜実現できていること＞
サイドバーの固定・停止・解除まではできていますが、動的コンテンツが入り込むとスクロールの最後で埋もれてしまいます。

＜実現したいこと＞
.box_sidemenuの高さ内に.scrollboxを収まらせたい

▽追記
.scrollboxはヘッダーが頭の位置にくると position:fixed;が付与されます。

調べても分かりませんでしたので、質問させていただきました。
もしよろしければ教えて頂ければと思います。

▽現状のソース
※ヘッダーも固定のため高さ分（112px）ずらしています。

/* サブメニュー固定 */
$(document).ready(function(){
$(function(){
    var target = $(".scrollbox");//固定する要素名
    var footer = $(".bunner_area")//ここでストップさせる
    var targetHeight = target.outerHeight(true);
    var targetTop = target.offset().top;
 
    $(window).scroll(function(){
        var scrollTop = $(this).scrollTop();
        if(scrollTop + 112 > targetTop){
            var footerTop = footer.offset().top;　//常に計算
             
            if(scrollTop + targetHeight + 112 > footerTop){
                customTopPosition = footerTop - (scrollTop + targetHeight)
                target.css({position: "fixed", top:  customTopPosition + "px"});
            }else{
                target.css({position: "fixed", top: "112px"});
            }
        }else{
            target.css({position: "static", top: "auto"});
        }
    });
});


});
};
});


//動的コンテンツ展開用
/* 開閉メニュー */

jQuery(function($){
  $('.close_menu').hide();
  $('#hot_spring').click(function () {
    $(this).next('.close_menu').slideToggle();
    $(this).toggleClass('open');
  });
});


jQuery(function($){
  $('.close_menu2').hide();
  $('#genre').click(function () {
    $(this).next('.close_menu2').slideToggle();
    $(this).toggleClass('open');
  });
});

※close_menuが動的な部分です。

<div class="box">
		<div class="box_sidemenu">
			<div class="next_search_area scrollbox">
			<form action="" method="POST">
				<div class="top_menu">
					<p class="title01"><span>情報検索</span></p>
					<ul class="menu">
						<li class="">月表示</a></li>
						<li><a href="">全ての情報表示</a></li>
					</ul>
				</div>

				<div class="search_text_area">
				<input class="search" name="keyword" placeholder="キーワード検索" type="search">
				<input type="submit" name="submit" value="" class="search_submit">
				</div>

				<p class="title02 open" id="hot_spring">エリア検索</p>
				<div class="close_menu" style="display: block;">
					<p><img src="/images/common/submenu_map.png" alt=""></p>
					<div class="genre_check">
						<input name="map1" type="checkbox" id="map1">
						<label for="map1">エリア</label><br>
						<input name="map2" type="checkbox" id="map2">
						<label for="map2">エリア</label><br>
						<input name="map3" type="checkbox" id="map3">
						<label for="map3">エリア</label><br>
						<input name="map4" type="checkbox" id="map4">
						<label for="map4">エリア</label><br>
						<input name="map5" type="checkbox" id="map5">
						<label for="map5">エリア</label><br>
						<input name="map9" type="checkbox" id="map9">
						<label for="map9">エリア</label><br>
					</div>

				<p class="title04">開催期間</p>
				<div class="held">
					<div class="held_box">
					<div class="search_text_area">
					<input class="search" name="search_s_date" type="text" value="">
					<input name="submit" class="search_submit" type="submit">
					</div>
					</div>

					<div class="held_box">
					<div class="search_text_area">
					<input class="search" name="search_e_date" type="text" value="">
					<input name="submit" class="search_submit" type="submit">
					</div>
					</div>
				</div>
				</div><!-- .close_menu_end -->

				<p class="title03" id="genre">ジャンル検索</p>
				<div class="close_menu2" style="display: none;">
				<div class="genre_check" id="genre_search">
					<input name="genre1" type="checkbox" id="genre1">
					<label for="genre1">ジャンル</label>
					<input name="genre2" type="checkbox" id="genre2">
					<label for="genre2">ジャンル</label><br>
					<input name="genre3" type="checkbox" id="genre3">
					<label for="genre3">ジャンル</label>
					<input name="genre4" type="checkbox" id="genre4">
					<label for="genre4">ジャンル</label><br>
					<input name="genre5" type="checkbox" id="genre5">
					<label for="genre5">ジャンル</label>
					<input name="genre6" type="checkbox" id="genre6">
					<label for="genre6">ジャンル</label><br>
					<input name="genre7" type="checkbox" id="genre7">
					<label for="genre7">ジャンル</label>
					<input name="genre10" type="checkbox" id="genre10">
					<label for="genre10">そのジャンル</label><br>
				</div>
				</div><!-- .close_menu2_end -->
				<ul class="btn_area">
					<li><input type="submit" value="検索"></li>
					<li><input type="reset" value="クリア"></li>
				</ul>
				</form>
			</div>
		</div>

		<div class="box_main">
			メインコンテンツ部分
		</div><!-- .box_main_end -->
		</div>

<!-- ここでストップ -->
<div class="bunner_area">
			<div class="container">
			
			</div>
		</div>

.box {
    width: 100%;
    -js-display: flex;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.box_sidemenu {
    width: 27%;
    margin-right: 3%;
}

.scrollbox {
    width: 290px;
}

.box_main {
    width: 70%;
    padding: 10px;
}

.bunner_area {
    width: 100%;
    padding: 20px;
    position: relative;
    z-index: 9;
}

もし足りない情報などがありましたらご教授頂ければと思います。

よろしくお願いいたします。

Answer 1

何とかCSSで自己解決できましたので、記載しておきます。

jQueryでは、難しかったので、下記サイトを参考にposition: sticky;で解決できました。
https://takafumimegumi.com/css-position-sticky#position_sticky

.sticky {
	position: -webkit-sticky;
	position: sticky;
	top: 110px;
}

<div class="box_sidemenu">
            <div class="next_search_area scrollbox sticky">
            <form action="" method="POST">
                <div class="top_menu">
                    <p class="title01"><span>情報検索</span></p>
                    <ul class="menu">
                        <li class="">月表示</a></li>
                        <li><a href="">全ての情報表示</a></li>
                    </ul>
                </div>

固定部分にstickyを付与しました。

いろいろと回答など頂きありがとうございました。
また、機会がありましたらよろしくお願いいたします。

Answer 2

動的コンテンツのtoggle時に、スクロールイベントを発火させれば良いのでは。

以下はサンプルです。

    $(this).next('.close_menu').slideToggle({
        done: function(){
            window.dispatchEvent(new Event('scroll'));
        },
    });

Comments

[Mokn1356]

回答ありがとうございます！

jQuery(function($){
$('.close_menu').hide();
$('#hot_spring').click(function () {
$(this).next('.close_menu').slideToggle({
done: function(){
window.dispatchEvent(new Event('scroll'));
},
});
});
});

上記で試してみたのですが、希望通りの動きは実現できませんでした。
もしかするとCSSかHTMLの問題の可能性もあるので、一度見直してみます。
回答ありがとうございました。

Answer 3

こんにちは！
コード拝見しました。
下記を試すと解決しませんか？
htmlにclearfixクラスを作成して.scrollboxの下に配置
cssに.clearfix {clear: both;}を追加

Comments

[Mokn1356]

回答ありがとうございます！
試してみたのですが、解決できませんでした。
多分ですが、Float系は使っていないので、別の原因かもしれませんね...
ありがとうございました。

Answer 4

動的コンテンツが.scrollboxを押し広げているなら

• オーバーフローするか
• .box_sidemenuや.boxを押し広げて.bunner_areaを下げるか

のどちらかでしょう。.bunner_areaの位置を変えたくないなら前者なので
overfollow-yをhiddenにするなどで対応してください

Comments

[Mokn1356]

回答ありがとうございます。
動的コンテンツが押し広げているというよりも浮いてしまっているようなイメージですね
.scrollbox自体がfixedで浮かせているため動的なコンテンツが途中で入ると難しいでしょうか？
※展開状態では、下で固定できているので読み込み後に動的コンテンツが増えると高さを計算しきれていないような状況です。