jQuery Resize工作不穩定

Question

如果我的函數在預期的窗口寬度大於1024px時出現問題，那麼在調整小於1024px的尺寸時會按預期工作，但當縮小比例時無法正常工作。

我試圖實現什麼，運行scrollTop功能，但只有當瀏覽器寬度小於1024px寬度。我似乎無法看到我所犯的錯誤。

這裏是我的Codepen和JS代碼： Codepen

function buttonClick() { 
    var width = $(window).innerWidth(); 
    console.log(width); 

    if (width < 960) { 
    $('.click').on('click', function() {  
     $('body').animate({ scrollTop: $('.div2').offset().top - 10 }, 300); 
    }); 
    } 
} 


$(function() { buttonClick(); }) 
$(window).on('resize',function() { 
    buttonClick(); 
}); 

Answer 1

你的主要問題是，你在重新分配和每一遍又一遍buttonClick()調整一步 - 它增加了多，因此處理click到.click ...

我會做這種方式：

$(function() { 

    function doIfLessThan960() { 
    var width = $(window).innerWidth(); 
    if (width < 960) { 
     $('html, body').animate({ scrollTop: $('.div2').offset().top - 10 }, 300); 
    } 
    } 

    $('.click').on('click', doIfLessThan960); 

}); 

這是：定義按鈕是否應該做點什麼之後才能點擊它。

jsBin demo ←如果窗口寬度小於960

按鈕只會工作