運行jQuery函數窗口後調整僅適用於最小寬度視

Question

我有我的塊元素浮動動畫jQuery腳本的問題。 我只想在窗口寬度大於1024像素的情況下獲得浮動框。下面

代碼工作正常，但是當我在桌面的分辨率（大於1024）打開網頁，並調整到更小的寬度，滾動火一樣的功效，對更大的分辨率改變CSS等。

我如何關閉/刪除這個CSS改變時，窗口寬度將小於1,024像素？

代碼：

$(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

如果我理解你的代碼的正確方法，你只需要取消綁定從窗口滾動事件。

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

你應該建立一個像這樣的結構：

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

    $(window).scroll(function(){ 

    /** your function code here **/ 

    }); 

}else{ 

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

}