Blog

HOME > Web > javascript > 【javascript】任意の量（高さ）スクロールしたらクラスを付与

【javascript】任意の量（高さ）スクロールしたらクラスを付与

2016/11/18

javascript JQuery

備忘録です。

ヘッダーやナビなどが任意の高さにスクロールしたらクラスを付与する方法です。

参考サイト
任意の量スクロールしたらクラス付与するjs

ページの頭から300px以上のスクロールで.fixedが付く

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

要素の高さを取得し、ページトップから要素の高さ以上スクロールしたら.fixedを付与

$(window).scroll(function(){
  var element = $('#header'),
       scroll = $(window).scrollTop(),
       height = element.outerHeight();
  if ( scroll > height ) {
    element.addClass('fixed');
  } else {
    element.removeClass('fixed');
  }
});

カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

ミュージシャンズ・プラザ

神社仏閣ホームーページ制作

ホームページ制作問合せ