ブラウザの横幅で処理を変えるjQueryの条件分岐

Question

ブラウザの横幅で処理を変えるjQueryの条件分岐についてです。

■PCサイズ(768px以上)時の処理

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

■タブレットサイズ(768px未満)時の処理

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

上記のように下記の部分を分岐したいです。

if ($(window).scrollTop() > 320) {

下記との組み合わせ方がわかりません。

$(window).on('load resize', function(){
  var winW = $(window).width();
  var devW = 767;
  if (winW <= devW) {
    //767px以下の時の処理
  } else {
    //768pxより大きい時の処理
  }
});

ご教授願います。

Answer 1

画面幅、スクロール位置によって、#head の設定がことなるということですので、
それが変化するイベントつまり（load scroll resize）に共通の処理を設定すればいいことになります。

現状のコードをなるべく活かすと下記のようになると思います。

$(function () {

    function setHead() {
        var winW = $(window).width();
        var devW = 767;
        var srlTop;
        if (winW <= devW) {
            srlTop = 200;
        } else {
            srlTop = 320;
        };
        if ($(window).scrollTop() > srlTop) {
            $('#head').addClass('fixed');
        } else {
            $('#head').removeClass('fixed');
        }
    }

    $(window).on("load scroll resize", function () {
        setHead();
    });
});