通常、イベントが発生する度に繰り返し実行される、scrollとresizeイベントの処理を、1回だけ実行したい時は、「変数」を使用することで実装できます。

Contents

  1. スクロールイベント
  2. リサイズイベント

スクロールイベント

スクロールを開始したら、「.pagetop」が下から飛び出すアニメーションを実装する場合、下記のように記述するとアニメーションが繰り返されてしまいます。

$(function() {
  var pagetop = $('.pagetop');
  
  $(window).on('scroll', function () {
    if ($(this).scrollTop() > 100) { // トップから100pxスクロールしたらスライドイン
		  pagetop.animate({
		  bottom: "50px"
		}, 600).animate({
		  bottom: "20px" // 下からスライドして20pxのところで固定
		});
    }
  });
});

アニメーションが繰り返されないように、するために下記のように変更しました。

$(function() {
  var flag = false, // 追加 
  	  pagetop = $('.pagetop');
  
  $(window).on('scroll', function () {
    if ($(this).scrollTop() > 100) { // トップから100pxスクロールしたらスライドイン
      if (!flag) {　// 追加 
        flag = true;　// 追加 
        pagetop.animate({
          bottom: "50px"
        }, 600).animate({
          bottom: "20px" // 下からスライドして20pxのところで固定
        });
      }
    }
  });
});

リサイズイベント

次は画面サイズによって処理を実行する方法です。

画面サイズは変数を用いて、PCの時とSPの時を判定させ、PCからSPに切り替わった時とSPからPCに切り替わった時に一回だけ処理を実行します。

var flag = '';
// 画面サイズの判定
function windowSize() {
    // 画面幅取得
    var w = $(window).innerWidth();
 
    // 画面幅767以下（フラグがspではない時）
    if (w <= 767 && flag != 'sp') {
        flag = 'sp';
		    // sp時の処理をここに書く
      console.log('spの処理')
      // 画面幅768以上（フラグがpcではない時）
    } else if (w > 767 && flag != 'pc') {
        flag = 'pc';
		    // pc時の処理をここに書く
      console.log('pcの処理')
    }
}

$(function() {
    // 画面サイズのチェック
    $(window).on('load resize', function() {
        windowSize();
    });
});