如何让 jQuery .resize() 触发不止一次？

Question

我想 add/remove class 取决于屏幕尺寸。当我使屏幕小于 700 像素时添加 class，但是当我将屏幕调整到 700 像素以上时，它会保留 class 添加而不是删除它。

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

Answer 1

未删除 class 的原因是您需要添加逻辑来删除 class:

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

另一方面，如果您尝试进行样式设置，更好的解决方案是简单地使用 CSS 媒体查询来处理调整大小和不同的屏幕尺寸。

如何让 jQuery .resize() 触发不止一次？

How to make jQuery .resize() trigger more than once?

jquery

resize