$ (window) .width() если оператор работает, когда он не должен

Question

Привет, ребята, у меня проблема с $(window).widthif инструкциями в jQuery. По какой-то причине моя функция работает, даже когда ширина окна меньше 991 пикселей, однако мой оператор if заявляет, что он должен работать, если ширина окна больше 991.

function ctaFixTop() { 
    var mn = $("#new-car-offer-cta"); 
    var offerHead = $('#new-car-offer-head'); 
    mns = "new-car-offer-cta-active"; 
    var hdr = 0; 
    var ctaHeight = $("#new-car-offer-cta").height(); 
    $('.header-wrapper, #top-bar, #new-car-back, #new-car-offer-head').each(function() { 
     hdr += $(this).outerHeight(); 
    }); 
    if ($(window).width() > 991) { 
    $(window).scroll(function() { 
     if ($(this).scrollTop() > hdr) { 
      offerHead.css('margin-bottom', ctaHeight); 
      mn.addClass(mns); 
     } else { 
      offerHead.css('margin-bottom', 0); 
      mn.removeClass(mns); 
     } 
    }); 
    } 
} 
$(window).resize(ctaFixTop); 
ctaFixTop(); 

Как вы можете видеть, функция ctaFixTop вызывается дважды, один раз на начальной загрузки и всякий раз, когда при изменении размера окна. Когда я изначально загружаю страницу с шириной окна ниже 991px, функция работает, как это должно быть, если я затем увеличиваю размер окон за 911px и уменьшу его до 911px, то будет вызвана функция $(window).scroll, даже если она завернута в оператор if, который заявляет, что он должен работать только в том случае, если ширина окна больше 991.

Любая идея, почему это может произойти, поскольку я пытался устранить эту проблему и просто не могу понять, почему функция вызывается даже с помощью оператора if вокруг него.

Благодаря

Answer 1

Это происходит потому, что scroll событие уже прикреплен к окну, и вы не вынимая его. Что вам нужно сделать, это положить

if ($(window).width() > 991) { 

внутри .scroll() метода, как это.

$(window).scroll(function() { 
    if ($(window).width() > 991) { 
    if ($(this).scrollTop() > hdr) { 
     offerHead.css('margin-bottom', ctaHeight); 
     mn.addClass(mns); 
    } else { 
     offerHead.css('margin-bottom', 0); 
     mn.removeClass(mns); 
    } 
}});