# スクロールした時に、ページ上部にタイトルを固定

タイトル1

タイトル1の説明文が入ります。タイトル1の説明文が入ります。タイトル1の説明文が入ります。タイトル1の説明文が入ります。タイトル1の説明文が入ります。 タイトル1の説明文が入ります。タイトル1の説明文が入ります。タイトル1の説明文が入ります。タイトル1の説明文が入ります。タイトル1の説明文が入ります。 タイトル1の説明文が入ります。タイトル1の説明文が入ります。タイトル1の説明文が入ります。タイトル1の説明文が入ります。タイトル1の説明文が入ります。

#function target

個別に要素を指定して、一つののアクションを割り当てる


$(function() {
  $(window).on('load scroll', function() {
		add_class_when_visible($('#type_1'));
		add_class_when_visible($('#type_2'));
		add_class_when_visible($('#type_3'));
		add_class_when_visible($('#type_4'));
		add_class_when_visible($('#type_5'));
  });
});

function add_class_when_visible(target){
	
		// スクロール位置を取得
    var scrollTop = $(window).scrollTop();
    var scrollBtm = scrollTop;
    
  if(target.length){
    // 対象要素の位置を取得
    var targetTop = target.offset().top;
    var targetBtm = targetTop + target.height();

    // 画面内にある場合
    if(scrollBtm > targetTop && scrollTop < targetBtm) {
        target.find('h2').addClass('fixed');
    } else {
        target.find('h2').removeClass('fixed');
    }
	}    
}