/assets/images/4163879/original/a959a6c1-8bc3-437b-b392-42bb6634cf11?1570507646)
E-kan株式会社では一緒に働く仲間を募集しています
こんにちは、E-kan株式会社の藤尾です。
本日は、岡田さんの記事を紹介します。
こんにちは。E-kan株式会社の岡田です。
既存ページのABテストのため、外部ツールにjQueryでテストしたい要素を書き込んでページを上書きするという業務をよくやるのですが、この間またしても地味に苦労したので備忘録。
ざっくり必要なところだけ抜き出すとこんな感じです。
やりたいこと
- スクロールして最初のCTAボタンが画面上から消えたらフッターにフロートボタンを表示させる
- スクロールして最後のCTAボタンが画面上に表示されたらフッターのフロートボタンを非表示にする
<html>
<body>
<section>
<a id="ctabutton_01" href="form.html">CTAボタン01</a>
（本文省略。それなりに長いし途中にCTAボタン02〜04がある。）
<a id="ctabutton_05" href="form.html">CTAボタン05</a>
</section>
<footer>フッター</footer>
<a class="floatBtn" href="form.html">フロートボタン</a>
</body>
</html>
jQuery
//フロートボタンを特定の位置から特定の位置まで表示させる
$(window).on('load',function(){//頁内の全ての要素が読み込まれてから実行
//ドキュメント全体の高さ
var pageHeight = $(document).height();
//頁上部から最初のCTAボタンまでの距離 ＋ CTAボタンの高さ(outerHeight:ボーダーの外側の高さ)
var ctaFirst = $('#ctabutton_01').offset().top + $('#ctabutton_01').outerHeight();
//ドキュメント全体の高さ - 頁上部から最後のCTAボタンまでの距離
var ctaLast = pageHeight - $('#ctabutton_05').offset().top;
$(window).on('scroll',function(){//スクロールすると実行される
//現在のトップからの位置 ＝ ウィンドウの高さ ＋ スクロールした高さ
var scrollPosition = $(window).height() + $(window).scrollTop();
//スクロールが最初のCTAボタンを超える＆最後のCTAボタンを超えない場合
if ($(window).scrollTop() > ctaFirst && pageHeight - scrollPosition >= ctaLast) {
$('.floatBtn').fadeIn(100);//0.1秒で出現
} else {//最初のCTAボタンを超えない＆最後のCTAボタンを超えた場合
$('.floatBtn').fadeOut(100);//0.1秒で消える
}
});
});
ちなみにこのテスト案は、ABテストで負けて本番環境へはリリースされませんでした。
悲しいのでここで供養。
【jQuery】特定の位置から特定の位置まで要素を表示させる
/assets/images/4163879/original/a959a6c1-8bc3-437b-b392-42bb6634cf11?1570507646)
