レスポンシブサイトでのjqueryのリサイズ用コードの書き方

お世話になっております。

各セクションが画面100%のシングルページサイトを制作しているのですが、

jqueryで、
2つめのセクションが見えている間のみクラスにfixedを付け、それ以外の場合は外すというふうにしたくて、下記のように書きました。

$window.on('scroll', function() {
    var firstHeight = $('#home').innerHeight(),  // 1番めのページの高さを取得
        secondHeight = $('#concept').innerHeight(), // 2番めのページの高さを取得
        scrollToImage = firstHeight + secondHeight; // 2つを合わせたページの高さを取得

    // 2番めのページが表示されている間のみfixedを付ける
    if ($window.scrollTop() >= firstHeight && $window.scrollTop() <= scrollToImage) {
        $('#img-catch').addClass('fixed');
    } else {
        $('#img-catch').removeClass('fixed');
    } 
});

これ自体は普通に動きます。
そこで、これにタブレット、スマホでは適応しないように

• 960px以上の場合のみ適応
• PCのウインドウをリサイズした場合に960pxを境に有効にしたり無効にしたり

というのを付け加えたくて下記のように追加したのですが、

$window.on('scroll resize', function() {
    var firstHeight = $('#home').innerHeight(),
        secondHeight = $('#concept').innerHeight(),
        scrollToImage = firstHeight + secondHeight;

    if ($window.width() >= 960) {
        if ($window.scrollTop() >= headerHeight && $window.scrollTop() <= scrollToImage) {
            $('#img-catch').addClass('fixed');
        } else {
            $('#img-catch').removeClass('fixed');
        }
    } else {
        if (('#img-catch').hasClass('fixed')) {
            $('#img-catch').removeClass('fixed');
        }
    }
});

fixedが付いている状態で960px以下にリサイズした場合、fixedが消えてくれません。
わかる方いらっしゃればご教授ください。

またjquery初心者でまだコードの書き方が曖昧です。
もっとスマートな書き方があれば合わせてよろしくお願いいたします。