こんにちは、yutaです。
今回実現させたいのは↑のように特定の要素の位置までスクロールした時にメッセージ(それは広告だったり、メニューバーだったり、topに戻るボタンだったり何でもいんですが)を表示させるという動きです。
まずは↑を実現させるコードを紹介して、そのあとにコーディング時のポイントについて説明する流れで行きます。では、早速見ていきましょう！
1.特定要素までスクロールしたらメッセージを表示する<HTML>
2.ロジックの説明
3.注意点
4.実際の動き(動画)
1.特定要素までスクロールしたらメッセージを表示する<HTML>
2.ロジックの説明
大事なのはjQuery部分なので<script>内の説明をしていきます。
まずは大雑把に説明します。
今回の動きを実現させるロジックは、実際にスクロールした量(px数)と画面のトップから特定要素までのオフセット(px数)をjQueryで取得して、
「スクロールした量 > 特定要素までのオフセット」
となった時にメッセージを表示するというものです。
adOffset = $('#mesPoint').offset().top;で特定要素までのオフセットを取得します。(.topがついているので縦方向のオフセット)
winH = $(window).height();はブラウザの高さを取得しています。というのも、↑のオフセットだけでメッセージを表示するタイミングを指定すると、特定要素がブラウザの上方に消えていったタイミングでメッセージを出すことになってしまうので、その問題を解消するために取得します。これを読んで意味分からなくても実際にコードを書き換えて動きを比べてみるとわかります。
$(window).scrollTop();で実際にブラウザをスクロールした量(px)が取得できます。
したがって以下(↑コードの65~71行目)の様に、
ブラウザのスクロール量 > 特定要素までのオフセット – ブラウザの縦幅
を満たす時にメッセージを表示(fadeIn())して、そうでなければ非表示(fadeOut())させることで、スクロールによるメッセージの表示・非表示を実現できます。
$(window).scroll(function () {
if ($(this).scrollTop() > adOffset - winH) { /* この条件でメッセージの表示・非表示を制御しています */
message.fadeIn();
} else {
message.fadeOut();
}
});3.注意点
ただ、ここで注意点があります。
特定要素までのオフセットとブラウザの縦幅は画面のリサイズ時にも取得するようにしなければいけません。
というもの、レスポンシブ対応したページは、PCで見たときとスマホで見た時とで要素の大きさが変化します。例えば画像だと、使用している端末の画面幅に合わせて横幅が拡大縮小し、アスペクト比を保つために高さも変化します。
そうです、ページ内にある要素の高さが変化するので例えばPCのブラウザをドラッグしてウィンドウ幅を変えた時には特定要素までのオフセットが変化するんです。
これに注意しているのが↑コードの57行目です。
$(window).on('load resize',function(){
adOffset = $('#mesPoint').offset().top;
winH = $(window).height();
});“resize“と記述することで、画面が読み込まれた時だけでなく、画面がリサイズされた時にもオフセットと画面縦幅の取得を行うようにしています。
4.実際の動き(動画)
実際に今回のコードを実行した時の動きを見てみましょう！
というわけで以上です。参考になった方は↓のバナーをクリックしていただけると嬉しいです。では、また！
