如何禁用屏幕後一個jQuery功能調整

Question

我試圖禁用此導航代碼後，屏幕小於1000像素

$(document).ready(function(){ 
    var scroll_start = 0; 
    var startchange = $('body'); 
    var offset = startchange.offset(); 
    if (startchange.length){ 
    $(document).scroll(function() { 
     scroll_start = $(this).scrollTop() > 50; 
     if(scroll_start > offset.top) { 
      $("#nav").css('background-color', 'rgba(35,46,63,1)'); 
      $("#nav").css('box-shadow', '4px 0px 10px rgba(0,0,0,0.5)'); 
     } else { 
      $('#nav').css('background-color', 'rgba(35,46,63,0)'); 
      $("#nav").css('box-shadow', '0px 0px 0px rgba(0,0,0,0)'); 
     } 
    }); 
    } 
}); 

任何幫助，將不勝感激！

Answer 1

使用on^{jQuery API}綁定事件，並使用特定的名稱來稍後解除綁定。

$(document).on("scroll.Nav", function() { 

再後來，如果某些條件，無論是在function(){代碼段的回調相遇，或者在另一個代碼段，只需使用

$(document).off("scroll.Nav"); 

Answer 2

你可以試試這個：

var windowWidth = $(window); 
windowWidth.on('resize', function(){ 
    if(window.innerWidth < 1000){ 
     //do something 
    } 
}) 

在// do something部分中，您可以在其中寫入禁用功能。上面的代碼將在屏幕調整大小並小於1000像素時執行內部函數。

Answer 3

基礎上稍加修改你的代碼，我會做如下：

$(document).ready(function(){ 
    var scroll_start = 0; 
    var startchange = $('body'); 
    var offset = startchange.offset(); 
    var doScrollStuff; 

    $(window).resize(function(){ 
    doScrollStuff = $(window).width() >= 1000; 
    }).resize(); 

    if (startchange.length){ 
    $(document).scroll(function() { 
     if (doScrollStuff) { 
     scroll_start = $(this).scrollTop() > 50; 

     if(scroll_start > offset.top) { 
      $("#nav").css('background-color', 'rgba(35,46,63,1)'); 
      $("#nav").css('box-shadow', '4px 0px 10px rgba(0,0,0,0.5)'); 
     } else { 
      $('#nav').css('background-color', 'rgba(35,46,63,0)'); 
      $("#nav").css('box-shadow', '0px 0px 0px rgba(0,0,0,0)'); 
     } 
     } 
    }); 
    } 
});