jQueryで指定範囲のみで追従するボタンを実装

CTAボタンの実装時にいつでも目につくよう配置しておきたいと希望されることがあります。ボタンが単独で配置されているデザインであれば固定で対応できましすが、今回はコンテンツ内に組み込まれているものだったので対応方法をメモ。

jQuery

$('.sidebar__order').css({'width': $('#sidebar1').width()+'px'});
$(window).scroll(function(){
	//スクロールするオブジェクトの高さ
	var boxhight = $('.sidebar__order').height();
	//追従開始位置
	var toplimit =  $('.sidebar__sticky').offset().top;
	//追従終了位置
	var bottomimit =  $('.seminar').offset().top - boxhight - 40;
		
	if($(window).scrollTop() > toplimit){
		$('.sidebar__order').css({'position':'fixed', 'top': '0'});
		if($(window).scrollTop() > bottomimit){
			$('.sidebar__order').css({'position':'absolute', 'top': bottomimit+'px'});
		}
	}else{
		$('.sidebar__order').css({'position':'initial', 'top': 'auto'});
	}
});

HTML

<div id="sidebar1">
	<div class="sidebar__bnr">
		<img src="○○○○.png">
	</div>
	<section class="sidebar__auther">
		<p class="sidebar__auther__image"><img src="○○○○.png"></p>
        <dl>
        <dt class="sidebar__auther__heading">運営会社：○○○○</dt>
<dd>○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○</dd>
        <dd class="sidebar__auther__btn"><a href="/" target="_blank">公式サイトを見る＞</a></dd>
        </dl>
	</section>
    <div class="sidebar__sticky">
        <section class="sidebar__order">
            <div class="sidebar__order__inner">
            <h2 class="sidebar__order__heading">まずはお気軽に<strong>お問い合わせ</strong>を。</h2>
            </div>
            <p class="sidebar__order__btn"><a href="">ホームページ制作の<br>プロに相談する（無料）</a></p>
        </section>
        
    </div>
</div>

<section class="seminar">
        <h2 class="section__heading"><i class="fas fa-th-large"></i>セミナー情報</h2>
        <p class="section__btn"><a href="/seminar/">セミナー情報を見る</a></p>
</section>

「sidebar__order」で囲まれた部分が「sidebar__sticky」の範囲内で追従。
スクロールに合わせて「sidebar__order」に上部からの座標を付与して固定。
「offset()」では下部座標をとれないので、下部コンテンツ「seminar」の上部座標位置を起点に追従できる下限座標を算出。

※実装サイトは「sidebar1」はメインコンテンツの右側に配置されているため「sidebar__sticky」に高さが設けられています。

• Jquery で一定範囲のみスクロールに追従させてみる。

実装サイト

• Webly（ウェブリー）