Reputation: 41
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
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