重複一個else /如果在窗口關閉功能調整

Question

，所以我有這樣的功能：

(function() { 

    var wwidth = $(window).width(); 

    function headroom() { 

     // headroom 

     $("nav").headroom({ 
      "tolerance" : 0, 
      "offset" : 1300, 

     }); 

     // to destroy 
     $("nav").headroom("destroy"); 

    } 

    function headroomMobile() { 

     // headroom 

     $("#nav-wrap").headroom({ 
      "tolerance" : 0, 
      "offset" : 200, 

     }); 

     // to destroy 
     $("#nav-wrap").headroom("destroy"); 

    } 

    if (wwidth >= 480) { 

     headroom(); 
    } 
    if (wwidth < 480) { 

     headroomMobile(); 
    } 



})(); 

我想這個功能重複，每次有一個窗口大小調整，但我不能讓它的工作，也許是因爲它是一個閉包函數..我試圖命名整個函數，並在window.resize上觸發它，但它沒有工作，我可能做了一些語法錯誤或錯位的代碼位。我相信這不是一件困難的事情，但我無法做到：\你能幫忙嗎？

非常感謝你！

Answer 1

如果你想要一個函數被調用一切都在調整窗口大小，然後只需將它綁定到

resize事件，像這樣：

(function() { 

    var wwidth = $(window).width(); 

    function headroom() { 

     // headroom 

     $("nav").headroom({ 
      "tolerance": 0, 
      "offset": 1300, 

     }); 

     // to destroy 
     $("nav").headroom("destroy"); 

    } 

    function headroomMobile() { 

     // headroom 

     $("#nav-wrap").headroom({ 
      "tolerance": 0, 
      "offset": 200, 

     }); 

     // to destroy 
     $("#nav-wrap").headroom("destroy"); 

    } 

    function setHeader() { 
     if (wwidth >= 480) { 
      headroom(); 
     } else { 
      headroomMobile(); 
     } 
    } 

    setHeader(); // on load 

    $(window).resize(function() { 
     wwidth = $(window).width(); 
     setHeader(); 
    }); 

})(); 

但是，這不是做最有效的方法..結賬this

Answer 2

使它成爲一個命名的函數，並將其用於兩件事：

(function() { 
    function handleWindowSizing() { 
     // ...logic here... 
    } 

    $(window).load(handleWindowSizing).resize(handleWindowSizing); 
})(); 

請注意，window上的load事件在頁面加載過程中處理真的很晚，您可能想要立即執行您的邏輯（確保您的代碼位於HTML的最末端，以便它所作用的任何內容已被解析並放入DOM中）。例如：

<!-- ...content... --> 
<script> 
(function() { 
    function handleWindowSizing() { 
     // ...logic here... 
    } 

    handleWindowSizing();  
    $(window).load(handleWindowSizing).resize(handleWindowSizing); 
})(); 
</script> 
</body> 
</html>