ウィンドウサイズ変更後にjquery関数を実行最小ビューポート幅の場合にのみ

Question

jqueryスクリプトでブロック要素フローティングアニメーションに問題があります。 ウィンドウ幅が1024pxより大きい場合にのみフローティングボックスを取得したいと思います。

以下のコードはうまくいきますが、デスクトップ解像度（1024以上）でページを開き、幅を小さくしてサイズを変更すると、より大きな解像度のようにCSSを変更するための同じ機能がスクロールされます。

ウィンドウの幅が1024px未満になると、このcssの変更をオフ/オフにするにはどうすればよいですか？

コード：

$(document).ready(function() { 

    function stickyOfferBox() { 
      var isMobile; 
      if ($(window).width() > 1024) { 
       isMobile = false; 

       var $sticky = $('.career-offer-box'),   
        stickyOffset = $('.career-offer').offset().top - 80, 
        stickyOffsetRight = ($(window).width() - ($sticky.offset().left + $sticky.outerWidth())), 
        stickyWidth = $sticky.width(), 
        stickyHeight,    
        stickyStopBreakpoint; 


       if (!isMobile) { 

        $(window).scroll(function(){ 

         var scroll = $(window).scrollTop(); 

         if (scroll >= stickyOffset) { 
          $sticky.css({ 
           'position': 'fixed', 
           'top': '80px', 
           'right': stickyOffsetRight, 
           'width': stickyWidth 
          }); 

          stickyHeight = $sticky.height(); // We want only floating box height instead of static 
          stickyStopBreakpoint = $('#contact').offset().top - stickyHeight ;  

         } else { 
          $sticky.css({ 
           'position': 'relative', 
           'top': 'auto', 
           'right': 'auto', 
           'width': 'auto' 
          }); 
         } 

         if (scroll >= (stickyStopBreakpoint - 160)) { 
          $sticky.css({ 
           'position': 'absolute', 
           'top': stickyStopBreakpoint - 80, 
           'right': $sticky, 
           'width': stickyWidth 
          }); 
         } 
        }); 
       } 
      } else { 
       isMobile = true;   
       return false; 
      } 
     } 

    stickyOfferBox(); 
    $(window).resize(stickyOfferBox); 
}); 

Answer 1

私は正しい方法あなたのコードを理解していれば、あなたは、単に窓からスクロールイベントのバインドを解除する必要があります。

if($(window).width() >= 1025){ 

    $(window).scroll(function(){ 

    /** your function code here **/ 

    }); 

}else{ 

$(window).unbind('scroll'); 

} 

：あなたはこのような構造を作成する必要があります

$(window).unbind('scroll');