スクロール – js –

今回はスクロールについてです。

スクロールしたらアニメーションさせる、

スクロールしたらナビゲーションを表示させる、

などスクロールを使う時のjsについてメモです。

スクロール量を取得

scrollTop();

$(function() {
$(window).on('scroll', function(){
  let scroll = $(this).scrollTop();
  console.log(scroll);
 });
});

画面上部から要素の終わりまでの距離を取得

offset().top

html要素、ここでは画面上部から.conまでの距離を取得

$(function() {
 $(window).on('scroll', function(){
   let scroll = $(".con").offset().top;
   console.log(scroll);
 });
});

スクロールして途中からナビゲーションを固定

画面上部からナビゲーション(.nav)までの距離がスクロール量より大きくなったら、fixedクラスを付与して、ナビゲーションを上部に固定させます。

$(function() {
     const nav = $(".nav"),
　　　　　           offset = nav.offset();
      $(window).on('scroll', function(){
           if($(window).scrollTop() > offset.top) {
	     nav.addClass('fixed');
	  } else {
	      nav.removeClass('fixed');
	  }
       });
});

スクロールするとふわっとアニメーションさせる

ふわっとアニメーションさせたい要素(ここでは.animation)の画面上部からの距離から要素の高さを引いた高さがスクロール量を超えたらactiveクラスを付与します。ここではheight/100を足しています。お好みで調節してください。

$(function(){
		$(window).on('load scroll',function (){
			$('.animation').each(function(){
				let target = $(this).offset().top;
				let scroll = $(window).scrollTop();
				let height = $(window).height();
				if (scroll > target - height + height/100){
					$(this).addClass('active');
				}
                                else {
				        $(this).removeClass('active');
				}
			});
		});
	});

アニメーション

activeクラスがついた要素(.animation)の中の要素(.circle)をアニメーション（今回はバウンド）をさせる場合。

activeクラスがついたらopacity: 1;で表示させます。

.animation .circle {
   opacity: 0;
   animation: .5s bound ease-in infinite alternate;
}

.animation.active .circle {
   opacity: 1;
}

@keyframes bound{
	 0%{transform:translateY(0px);}
	 100%{transform: translateY(24px);}
}