Question

function navbarBackground() {
    if ($(window).width() > 639) {
        $(document).scroll(function () {
            if ($(window).scrollTop() > 60) {
                $('.navbar').addClass('back', 250);
            } else {
                $('.navbar').removeClass('back', 250);
            }
        });
    } else {
        $('.navbar').addClass('back', 250);
    }
}

$(window).resize(function() {
    navbarBackground();
});

$(document).ready(function() {
    navbarBackground();
}

当用户滚动超过60px以添加类并且如果它仅在屏幕宽度超过639px时滚动小于60px时我需要它，并且当它收缩时它需要添加类即使它不是滚动，也可以在调整大小和窗口就绪时执行此操作。问题是我的滚动功能适用于小于639px，所以当我向下滚动并向后滚动到顶部时它会删除该类但它不应该（在小屏幕上）。有什么问题？

Answer 1

对于给定要求的逻辑是有缺陷的，因为为窗口调整大小的每个像素附加scroll处理程序一次。您还只检查navbarBackground()函数中的窗口宽度，从不更改窗口大小。

试试这个简化版：

function handleHeaderState() {
    var $win = $(this);
    $('.navbar').toggleClass('back', $win.scrollTop() > 60 && $win.width() > 639);
}

$(window).on({
    scroll: handleHeaderState, // on scroll
    resize: handleHeaderState // on resize
});

handleHeaderState(); // on load

Example fiddle

Answer 2

function navbarBackground() {
  if ($(window).width() > 639) {
    $('.navbar').removeClass('back', 250);
    $(document).scroll(function () {
      if ($(window).scrollTop() > 60) {
        $('.navbar').addClass('back', 250);
      }
      else {
        $('.navbar').removeClass('back', 250);
      }
    });
  }
  else {
    $(document).unbind('scroll');
    $('.navbar').addClass('back', 250);
  }
}

$(window).resize(function() {
    navbarBackground();
});


$(document).ready(function() {
  navbarBackground();
}

我用这种方式解决了这个问题，而不是x！

Jquery调整大小或滚动功能不起作用？

2 个答案: