jQuery：为什么我的脚本无法删除该类？

Question

jQuery won't remove the class after scrolling

This is my script:

$(window).scroll(function(){
    if($(window).scrollTop() >= $("#white").offset().top -70) {
        $('.burger-menu').addClass('white');
    } else {
        $('.burger-menu').removeClass('white');
    }
});

$(window).scroll(function(){
    if($(window).scrollTop() >= $("#color-main").offset().top -70) {
        $('.burger-menu').addClass('color-main');
    } else {
        $('.burger-menu').removeClass('color-main');
    }
});

$(window).scroll(function(){
    if($(window).scrollTop() >= $("#yellow").offset().top -70) {
        $('.burger-menu').addClass('yellow');
    } else {
        $('.burger-menu').removeClass('yellow');
    }
});

This is my HTML:

<section class="home-page" id="white">Blablabla</section>
<section class="wrap" id="color-main">Blablabla</section>
<section class="wrap" id="yellow">Blablabla</section>

but my <div>

<div class="burger-menu white color-main yellow">

still has the classes "white" and "color-main", which should be removed. :(

I made a codepen for you to see it.

Answer 1

There are 2 fixes I would recommed you try:

1. Don't do multiple .scroll(function(){...}) calls, they overwrite each other.
2. Use $("body").scroll(function(){...}) , because that's the element you (usally) scroll in

Answer 2

The below example uses only the IF statement and deletes the other classes. Try this and see if you get the result you desire. Instead of relying on an ELSE that could be broken by another scroll function else statement we simply remove all classes and only add the class you want.

Example:

   $(window).scroll(function () {
       if ($(window).scrollTop() >= $("#white").offset().top - 70) {
           $('.burger-menu').removeClass("color-main").removeClass("yellow").addClass('white');
       }
   });
   $(window).scroll(function () {
       if ($(window).scrollTop() >= $("#color-main").offset().top - 70) {
           $('.burger-menu').removeClass("white").removeClass("yellow").addClass('color-main');
       } 
   });
   $(window).scroll(function () {
       if ($(window).scrollTop() >= $("#yellow").offset().top - 70) {
           $('.burger-menu').removeClass("color-main").removeClass("white").addClass('yellow');
       } 
   });

Answer 3

I agree with those who suggest putting them all in a single .scroll() function. This worked for me:

(function($) {
  $(window).scroll(function () {
    if ($(window).scrollTop() >= $("#white").offset().top - 70) {
      $('.burger-menu').addClass('white');
    } else {
      $('.burger-menu').removeClass('white');
    }
    if ($(window).scrollTop() >= $("#color-main").offset().top - 70) {
      $('.burger-menu').addClass('color-main');
    } else {
      $('.burger-menu').removeClass('color-main');
    }
    if ($(window).scrollTop() >= $("#yellow").offset().top - 70) {
      $('.burger-menu').addClass('yellow');
    } else {
      $('.burger-menu').removeClass('yellow');
    }
  });
})(jQuery);

Answer 4

To have only one class active at a time, use removeClass to remove the others. You can use a single scroll event handler, and rearrange the code to look for the last section first, that makes the code simpler:

$(window).scroll(function(){

  var top = $(window).scrollTop() + 70;

  if (top >= $("#yellow").offset().top) {
    $('.burger-menu').removeClass('white color-main').addClass('yellow');
  } else if(top >= $("#color-main").offset().top) {
    $('.burger-menu').removeClass('white yellow').addClass('color-main');
  } else if (top >= $("#white").offset().top) {
    $('.burger-menu').removeClass('color-main yellow').addClass('white');
  } else {
    $('.burger-menu').removeClass('white color-main yellow');
  }

});

Demo: https://jsfiddle.net/Guffa/yka8nzt4/1/

Another way would be to determine the status for each class:

$(window).scroll(function(){

  var top = $(window).scrollTop() + 70;
  var white = top >= $("#white").offset().top;
  var main = top >= $("#color-main").offset().top;
  var yellow = top >= $("#yellow").offset().top;

  $('.burger-menu')
    .toggleClass('white', white && !main)
    .toggleClass('color-main', main && !yellow)
    .toggleClass('yellow', yellow);

});