スクロールしたら、ナビゲーションを固定する

スクロールイベント
今まで授業では、要素が読み込まれたら動くという「$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');
    }
  });
});

シングルページなどの縦長ページの場合、上下にスクロールする量がどうしても増えてしまいます。なのでユーザーがいつでも移動出来るように、常にナビゲーションを画面上部などに固定する必要があります。ただ固定するだけならposition:fixedで良いのですが、レイアウト上、ある程度スクロールしたら固定にしたいなどの場合は、jQueryのスクロールイベントの設定で必要になってきます。さらに移動の際には「スムーススクロール」の動きをつけてみましょう。

参考サイト

www.bloomingville.com

$(function() {
  $(window).scroll(function() {
  if ($(window).scrollTop() > 600) {
$('nav').addClass('fixed');
} else {
$('nav').removeClass('fixed');
    }
  });
});

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

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