如何讓jQuery.resize（）不止一次觸發？

我想根據屏幕大小添加/刪除一個類。當我使屏幕小於700px時添加該類，但是當我將屏幕大小調整爲700時，它會添加類而不是刪除它。如何讓jQuery.resize（）不止一次觸發？

jQuery(document).ready(function($){ 
$(window).resize(function() { 
    if ($(this).width() < 700) { 
    $('.home #secondaryHeader').addClass('fixed'); 
    } else { 
    $('.home #secondaryHeader').removeClass('fixed'); 
    } 
}); 
});

來源

2015-08-30 Beth

代碼中沒有'else'代碼塊，即您不根據屏幕大小切換類名，以及爲什麼要刪除該元素？另外使用CSS Media Queries有什麼問題？ – undefined

究其原因，類沒有被去掉的，因爲你需要添加邏輯來刪除類：

if ($(this).width() < 700) { 
 
    $('.home #secondaryHeader').addClass('fixed'); 
 
    $('#featured header img, #primaryNav').remove(); 
 
} else { 
 
    $('.home #secondaryHeader').removeClass('fixed'); 
 
}

在另一方面，如果你正在嘗試做的樣式，更好的解決方案是簡單地使用CSS媒體查詢處理重新調整大小和不同的屏幕大小。

來源

2015-08-30 00:53:21

@vohuman我粘貼了錯誤的代碼。我意識到它的一部分可以通過媒體查詢來完成。我將其編輯爲我所擁有的內容（以及第二位評論者的建議），但它不起作用。我使用jquery而不是媒體查詢的原因是因爲我有一個腳本，當您滾動到某個點時顯示菜單，但我希望它只是在小屏幕尺寸時始終顯示。但原文取消了這一點。或者，也許我只是困惑，做錯了！ – Beth

如何讓jQuery.resize（）不止一次觸發？

回答

相關問題