$(window).width() if 语句在不应该运行时运行答案

【问题标题】：$(window).width() if statement running when it shouldn't$(window).width() if 语句在不应该运行时运行
【发布时间】：2016-06-08 18:00:24
【问题描述】：

大家好，我对 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 函数将被调用，即使它包含在 @ 987654329@ 声明它只应在窗口宽度大于 991 时运行。

知道为什么会发生这种情况，因为我已经尝试解决这个问题并且根本无法理解为什么即使使用 if 语句也会调用该函数。

谢谢

【问题讨论】：

滚动事件已经与窗口绑定。您的条件只会在页面加载时第一次检查，如果条件为真，滚动事件将绑定到窗口，直到您取消绑定或卸载页面。您应该在滚动甚至回调中移动您的 if 条件。每次滚动时检查窗口宽度。

标签： javascript jquery

【解决方案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);
    }
}});

【讨论】：