64.スクロールしたら要素を表示する ～jQueryで検知～
今日はスクロールを検知して、要素を表示する。
そんな動きを作っていきましょう。
どうやって作るの？
ざっくり今回の流れは、
これで行きましょう。
jQueryでスクロールを検出する
まずはコードから
$(window).on("scroll", function() {
～～～
});
ページのスクロールを検出してたら、
処理を実行します。
$(window).on("click",function(){
});
クリック検出の時と引数だけが異なる形ですね。
トップからの位置を条件に指定する
if (200< $(this).scrollTop()) {
～～～
}
else{
}
これは、
もし、スクロールされた要素(ページ)のページトップからのスクロール量が200より大きかったら、if括弧内の処理を実行する。
そうでなければ、else括弧内の処理を実行する。
という意味です。
$(this).scrollTop()というのが、ページの現在のスクロール量で、それが200より大きかったら…ということですね。
クラスを指定して要素を表示・非表示する
これは以前も使ったことがある関数で実現できます。
例えば.to-topクラスが指定されている要素に対して、
アニメーションをつけて表示させるなら
$(".page-top").fadeIn();
非表示なら
$(".page-top").fadeOut();
です。
他にもアニメーションは種類がたくさん用意されているので、そちらを使ってもよいと思います。
実際のコードを確認
まずはHTMLから
<div class="page-top"><a href="#">top</a></div>
このHTMLのブロック要素を「スクロールを検出したら、トップからの距離に基づいて表示・非表示」させていきます。
jQueryは先ほどのものを正しい入れ子状態にすれば完成したも同然です。
$(window).on("scroll", function () {
if (200 < $(this).scrollTop()) {
$(".page-top").fadeIn();
}
else {
$(".page-top").fadeOut();
}
});
これで完成です。
スクロールが検出されて、縦のスクロール量が200を超えたタイミングで、要素がfadeIn関数でアニメーション表示されます。
逆にスクロールが検出されて、縦のスクロール量が200を下回ったタイミングで、要素がfadeOut関数でアニメーションで非表示になります。
ただし、.page-topクラスの要素はCSSで予め「display:none;」を指定しておく必要があります。
また、.addClass関数や.removeClass関数を使って、要素へのクラスの追加・削除で表示非表示を切り替えるやり方もあります。
今日のまとめ
- jQueryでスクロールを検出するのはクリック検出と引数が違うだけ
- 分岐条件の指定を「ページの現在のスクロール量」を使うことで、一定量スクロールしたらという条件によって処理をわけられる。
- 条件分岐の中に表示・非表示の処理を書くことでスクロール量に応じて、表示・非表示を切り替えられる。
jQueryでアニメーションをつけたり、何か条件をつけて、ユーザーの操作に対して動かすというのは楽しいですね。
では、また。
