【jQuery】scrollTop();

ブログを作って欲しいと依頼があり、ビューにこだわってみようと思い、色々チャレンジ中です。

メニューバーをスクロール後一定の位置で固定したかったので、jQueryのscrollTop();を使ってみました。 ※よく使われる指定位置へスクロールを飛ばすパターンじゃないです、ご注意を！

使い方

$(function() {
// スクロールしたら発動
$(window).scroll(function() {

// スクロール量を変数に格納
let st = $(this).scrollTop();
  });
});

このままだと変数stにinteger（数値）で位置情報が入るだけです。 あとは表示したければpタグなどにtextで付与ですね。

$('p').text("現在のスクロールの位置は:"+st);
// 現在のスクロールの位置は:100みたいな感じです。

自分の場合は$(window)の部分をクラス指定できるかと思い、対象のクラスを入れ込んでみましたが、上手くいきませんでした。 無理くりですが、希望のスクロールの位置をif文で分けてやりたいUIの実装しました。

$(function(){
  $(window).scroll(function (){
    let st = $(this).scrollTop();
    if (st >= 取得した数値){
      // 行いたい処理
    } else {
      // 行いたい処理
    }
  });
});

備忘録+参考になる方がいれば良いなと思います！