JavaScriptをレスポンシブで切り替える方法

Question

JavaScriptをデバイス幅に応じた調整をするにはどのようにすればよいのでしょうか。
現状５６０以下にした際に付与したクラスがブラウザ幅を戻してもそのままの状態になっています。

 $(window).on('load resize', function(){
  var $windowWidth = window.innerWidth
  var $breakPointA = 560;
  var $breakPointB = 959;
    var isMobileSize = ($windowWidth < $breakPointA);
    var isTabletSize = ($windowWidth <= $breakPointB) && ($windowWidth > $breakPointA);
    var isPcSize = ($windowWidth > $breakPointB);

  if (isTabletSize) {
  //５６０以上〜９５９以下の設定
  } else if (isMobileSize) {
		$(function() {
  var $win = $(window),
      $nav = $('.site-header'),
      navPos = $nav.offset().top,
      fixedClass = 'is-fixed';
  $win.on('load scroll', function() {
    var value = $(this).scrollTop();
    if ( value > navPos ) {
      $nav.addClass(fixedClass);
		$('.entry-content').addClass('header-top-margin');
    } else {
      $nav.removeClass(fixedClass);
		$('.entry-content').removeClass('header-top-margin');
    }
  });
});
  } else if (isPcSize) {
//９６０以上の設定
  }

})

Comments

[m.ts10806]

質問は 何でしょうか

[nakajima4]

５５９px以下のサイズのみにスクリプトが効くようにしたく考えています。

[m.ts10806]

それは「要件」であり「質問」にはなってませんよ。
何を聞きたいのかハッキリと質問本文に記載してください。

Answer 1

まず、resizeやscrollのような「何度も呼ばれるイベント」内でイベント登録をすると、多重にイベントが登録され続けてしまうのでやめましょう。（提示されたコードはリサイズするたびにscrollイベントのコールバックに関数を重複登録し続けます）

現状５６０以下にした際に付与したクラスがブラウザ幅を戻してもそのままの状態になっています。

別の状況に変わった時にリセットするようなコードを書けばよいです。

$(function() {
	var $windowWidth, $breakPointA, $breakPointB, isMobileSize, isTabletSize, isPcSize;
	var $win = $(window)
		, $nav = $('.site-header')
		, navPos = $nav.offset().top
		, fixedClass = 'is-fixed';
	$win.on('load resize', function() {
		$windowWidth = window.innerWidth
		$breakPointA = 560;
		$breakPointB = 959;
		isMobileSize = ($windowWidth < $breakPointA);
		isTabletSize = ($windowWidth <= $breakPointB) && ($windowWidth > $breakPointA);
		isPcSize = ($windowWidth > $breakPointB);
	})
	$win.on('load scroll', function() {
		if (isTabletSize) {	//５６０以上?９５９以下の設定
			// ここで状態をリセットする（isMobileSize/isPcSizeの時の変更を戻す）
			/* isTabletSize の処理 */
		} else if (isMobileSize) {
			// ここで状態をリセットする（isTabletSize/isPcSizeの時の変更を戻す）
			var value = $(this).scrollTop();
			if (value > navPos) {
				$nav.addClass(fixedClass);
				$('.entry-content').addClass('header-top-margin');
			} else {
				$nav.removeClass(fixedClass);
				$('.entry-content').removeClass('header-top-margin');
			}
		} else if (isPcSize) {	//９６０以上の設定
			// ここで状態をリセットする（isMobileSize/isTabletSizeの時の変更を戻す）
			/* isPcSize の処理 */
		}
	});
}); // 大雑把なコードの組み方を提示しています。なので、そのまま動くかわかりません

Comments

[nakajima4]

上記のコードを参考に、リセットするコードを追加したらうまくできました。
スクロールが変な挙動をしてる原因もわかり、イベントの登録の仕方のもためになりました。

Answer 2

window幅が変わったら発火すれば良いと思います。