scrollTop()を使ってスクロール値を保持したままfixedボタン先のポップアップを開閉させる
タイトルが長くなってしまいましたが、タイトル通り画面をスクロールした時の位置を保持したまま固定ボタン先のポップアップを開閉させる実装をメモしました！
最近スマホ画面などでは固定（追従）ボタンを使うことが多いと思います。
固定（追従）ボタンのリンク先が画面遷移ではなく、ポップアップの場合閉じた時に画面の位置を保持しておきたいですよね！
そんな時は、sccのposition:fixed; と jQueryのscrollTop()をうまく使いましょう😊
scrollTop()とは
scrollTop()とは、画面をスクロールした時のスクロール値のことです。
つまりこのメソッドで、ページトップからどのくらいスクロールされたかがわかります。
ちなみに、横スクロールの場合はscrollLeft()で同じように画面の右からどれだけ横スクロールしたかがわかります😊
scrollTop()のほかに、offset().topというのも私はよく使用します。
offset().topとは、画面上からどれだけの位置に指定された要素があるかを取得することができます。
指定された要素に到達したらなにかアクションを行う時に便利ですね！
デモサイトはこちら！
HTML
<div class="wrapper">
<p>ページトップ</p>
<p class="fixed-btn">
<a href="javascript:void(0);" class="fixed-btn-link js-overlay-modal-open">追従ボタン</a>
</p>
</div>
<div class="overlay-modal js-overlay-modal">
<div class="overlay-modal__overlay"></div>
<div class="overlay-modal__body">
<div class="overlay-modal__inner">
<a href="javascript:void(0);" class="overlay-modal__close js-overlay-modal-close"><i class="fas fa-times"></i></a>
<p>オーバーレイで表示されるポップアップウィンドウです。</p>
</div>
</div>
</div>
CSS
.wrapper{
display: block;
height: 2000px; /* スクロールさせるため仮で高さをいれてあります */
margin: 30px;
}
.fixed-btn-link{
position: fixed;
right: 10px;
bottom: 15px;
padding: 5px 15px 5px;
z-index: 1;
color: #333;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 30px;
-webkit-box-shadow: 0 2px 2px 0 rgb(0 0 0 / 15%);
box-shadow: 0 2px 2px 0 rgb(0 0 0 / 15%);
font-size: 13px;
text-decoration: none;
}
.overlay-modal{
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1000;
}
.overlay-modal__overlay{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.6);
}
.overlay-modal__body{
width: 100%;
position: absolute;
top: 50px;
-webkit-transition: .4s;
transition: .4s;
}
.overlay-modal__inner{
margin: 0 auto;
width: 80%;
max-height: calc(100vh - 180px);
position: relative;
background-color: #fff;
border-radius: 8px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
}
.overlay-modal__inner p{
font-size: 13px;
padding: 20px;
}
.overlay-modal__close{
position: absolute;
top: 10px;
right: 10px;
}
body.modal-open{
width: 100%;
height: 100%;
position: fixed;
}
jQuery
scrollTopValueを代入して画面上からのスクロール値を取得します。
saveScrollTopValue = scrollTopValueで画面上からのスクロール値（scrollTopValue）とsaveScrollTopValueが同じになる指定をします。
固定（追従）ボタンを押下しポップアップが表示された際、bodyに画面上からのスクロール値を直接スタイル({“top”:-scrollTopValue + ‘px’});で指定させスクロール途中のままポップアップが表示されるようにします。
ポップアップを閉じる際は、bodyのcssと直接styleをなくし開いた時のスクロール位置を$(window).scrollTop(saveScrollTopValue);で保持します。
// スクロール値取得
var scrollTopValue = 0;
$(window).scroll(function() {
scrollTopValue = $(this).scrollTop();
});
var saveScrollTopValue = 0;
// モーダル開く
$(".js-overlay-modal-open").on("click", function () {
saveScrollTopValue = scrollTopValue;
$('body').addClass('modal-open').css({"top":-scrollTopValue + 'px'});
$(".overlay-modal").fadeIn('normal');
});
// モーダル閉じる
$(".js-overlay-modal-close").on("click", function () {
$('body').removeClass('modal-open').css('top', '');
$(window).scrollTop(saveScrollTopValue);
$(".overlay-modal").fadeOut('normal');
});
});
scrollTop()は画面のどの位置にきたら何をするか指定したいときにとっても便利ですね😊
私もまだまだわからないことが多いので、都度こちらでメモしていきたいと思います！
おすすめのjQuery参考書はこちら！
