|Liberty自由に生きる。【jQuery】特定要素までスクロールした時にメッセージを表示する【レスポンシブ】JavaScript|jQuery|プログラミングこんにちは、yutaです。今回実現させたいのは↑のように特定の要素の位置までスクロールした時にメッセージ(それは広告だったり、メニューバーだったり、topに戻るボタンだったり何でもいんですが)を表示させるという動きです。↑を実現させるコードを紹介して、そのあとにコーディング時のポイントについて説明する流れで行きます。大事なのはjQuery部分なので<script>内の説明をしていきます。特定要素までのオフセット」となった時にメッセージを表示するというものです。$('#mesPoint').offset().top;で特定要素までのオフセットを取得します。$(window).height();はブラウザの高さを取得しています。いうのも、↑のオフセットだけでメッセージを表示するタイミングを指定すると、特定要素がブラウザの上方に消えていったタイミングでメッセージを出すことになってしまうので、その問題を解消するために取得します。これを読んで意味分からなくても実際にコードを書き換えて動きを比べてみるとわかります。$(window).scrollTop();で実際にブラウザをスクロールした量(px)が取得できます。ブラウザの縦幅を満たす時にメッセージを表示(fadeIn())して、そうでなければ非表示(fadeOut())させることで、スクロールによるメッセージの表示・非表示を実現できます。}});3.注意点ただ、ここで注意点があります。特定要素までのオフセットとブラウザの縦幅は画面のリサイズ時にも取得するようにしなければいけません。いうもの、レスポンシブ対応したページは、PCで見たときとスマホで見た時とで要素の大きさが変化します。画像だと、使用している端末の画面幅に合わせて横幅が拡大縮小し、アスペクト比を保つために高さも変化します。ページ内にある要素の高さが変化するので例えばPCのブラウザをドラッグしてウィンドウ幅を変えた時には特定要素までのオフセットが変化するんです。これに注意しているのが↑コードの57行目です。$(window).height();});“resize“と記述することで、画面が読み込まれた時だけでなく、画面がリサイズされた時にもオフセットと画面縦幅の取得を行うようにしています。4.実際の動き(動画)実際に今回のコードを実行した時の動きを見てみましょう!というわけで以上です。参考になった方は↓のバナーをクリックしていただけると嬉しいです。【Javascript】CSSを動的に書き換える超簡単なjQueryの導入方法についてメモしておく【Javascript】HTMLの要素を動的に追加・削除する。Academyは、人気のJavaやHTML、CSS、PHPを始め、UnityやAIコースなど様々な分野のプログラミングが学べるオンラインプログラミングスクールです。エンジニア転職保証があるプログラミング未経験からエンジニア転職を目指す「エンジニア転職保証コース」では、現職エンジニアとキャリアカウンセラーによる転職サポートが受けられます。Academyの無料体験ができます。興味がある方は是非上のバナーからチェックしてみてください。yutric9☆gmail.com☆を@に置き換えて送信してください。仕事のご依頼や、その他の質問など何でもお気軽にお問い合わせください。2019プライバシーポリシ。