Window Resize in jQuery not working correctly

Question

I have the jQuery function below that is meant to remove a class on window load and resize if the width is greater than 992 px and add a class if its less than 992px.

It seems to be working fine however the class stays added if i increase the window size from 992 to 1010px. At 1011px it is removed.

jQuery(document).ready(function($){

$(window).on('resize', function() {
if($(window).width() > 992) {
     $('.bid-overlay-booking').removeClass('fancyboxID-booking');
}
else{

     $('.bid-overlay-booking').addClass('fancyboxID-booking');
}
}).resize();
});

Answer 1

I wrestled with something similar a while back. Here was my kludge fix.

var windowHeight = 460;
var windowWidth = 800;
if (document.body && document.body.offsetWidth) {
    windowHeight = document.body.offsetHeight;
    windowWidth = document.body.offsetWidth;
}
if (document.compatMode == 'CSS1Compat' && document.documentElement && document.documentElement.offsetWidth) {
    windowHeight = document.documentElement.offsetHeight;
    windowWidth = document.documentElement.offsetWidth;
}
if (window.innerWidth && window.innerHeight) {
    windowHeight = window.innerHeight;
    windowWidth = window.innerWidth;
}

if(windowWidth  > 992) {
     $('.bid-overlay-booking').removeClass('fancyboxID-booking');
}
else{

     $('.bid-overlay-booking').addClass('fancyboxID-booking');
}