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

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();
}

I need when user scrolls over 60px to add class and remove it if it's scrolled less than 60px only if screen width is more than 639px, and when it shrinks it adds class even if it's not scrolled, and also to do that on resize and window ready. The problem is that my scroll function applies on less than 639px, so when i scroll down and scroll back to top it removes the class but it shouldn't (on small screen). What is the problem?

Answer 1

Your logic for the given requirements is flawed as you attach the scroll handler once for every pixel the window is resized. You also only check the window width within the navbarBackground() function, never when then window size is changed.

Try this simplified version:

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();
}

i solved it this way, thanx!