Jqueryを利用して、一定値を超えた場合にクラスを変更する処理を行いたいと考えています。

やりたい事
１：画面を横720px以下に縮小場合に、指定CSSを設定
２：画面を横721px以上にした場合も指定CSSを設定

確認したい点
画面を縮小した場合はイベントが発火するのですが、拡大した場合にイベントが発火しない為、どなたかご教授いただければ幸いです。

```
<body>
  <div class="tabbody">
    <table>
      <thead>
        <tr>
          <th class="w-5" id="tr-no">No.</th>
          <th class="w-10">ステータス</th>
          <th class="w-25">テストコード</th>
          <th class="w-40" id="tr-agency-name">支店名</th>
          <th class="w-25" id="last-update">最終更新日時</th>
          <th class="w-10 tcenter" >チェック</th>
          <th class="" >照会</th>
          <th></th>
        </tr>
      </thead>
    <table>
  </div>


</body>

$(function() {
 var tabbody = $('.tabbody');

 tabbody.scrollLeft(function () {

  if ($(window).scrollLeft(720) ) {
        console.log("ここは呼び出しされる")
    $('#tr-no').removeClass('w5').addClass('w-7');
    $('#tr-agency-name').removeClass('w40').addClass('w38');
    $('#last-update').removeClass('w15').addClass('w15-7');

  } else if ($(window).scrollLeft(721)) {
     console.log("ここが呼び出しされない")
   $('#tr-no').removeClass('w7').addClass('w-5');
   $('#tr-agency-name').removeClass('w38').addClass('w40');
   $('#last-update').removeClass('w15-7').addClass('w15');
  }
 });
});