スクロールイベントの使い方

スクロールイベント

今まで授業では、要素が読み込まれたら動くという「$function」とクリックしたら動くという「on.click」イベントの2つを主にやってきましたが、今回はそれに加えてウィンドウをスクロールしたら動く、「スクロールイベント」をやってみましょう。

スクロールイベントの場合、対象となる要素は必ず「$window」です。

$(function() {
  $(window).scroll(function() {
 //画面がスクロールされたら、この中の命令が実行される
 $('.box').addClass('scroll');
  });
});

ただし、このままだと1pxスクロールしただけで、スクロールイベントが動いてしまうので、「if文」を使ってスクロールする量を条件付けしましょう。

$(function() {
  $(window).scroll(function() {
//もし、windowのtopから200px以上スクロールしたら、.boxにaddClassする
  if ($(window).scrollTop() > 200) {
$('.box').addClass('scroll');
} else {
//それ以下の場合はremoveClassする
$('.box').removeClass('scroll');
    }
  });
});

要素の高さを取得し、変数に代入する場合

$(function() {
 
  // paddingとborderを含めた高さを取得し、変数に格納
  var h = $('header').outerHeight();
 
  // コンソールログに表示
  console.log(h);
 
});