Beth
Beth

Reputation: 41

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

I want to add/remove a class depending on screen size. The class is added when I make the screen smaller than 700px, but when I resize the screen over 700 it keeps the class added instead of removing it.

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

Upvotes: 0

Views: 51

Answers (1)

Lukas Steiblys
Lukas Steiblys

Reputation: 76

The reason the class is not removed is because you need to add logic to remove the class:

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

On the other hand, if you are trying to do styling, the better solution is to simply use CSS media queries for handling re-sizing and different screen sizes.

Upvotes: 1

Related Questions