javascript - $(window).width() if 语句在不应该运行的时候运行

Question

大家好，我在 jQuery 中遇到 $(window).width if 语句的问题。由于某种原因，即使窗口宽度小于 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);
    }
}});