jQuery:为什么我的脚本不能删除类

jQuery: Why can't my script remove the class?

本文关键字：不能 删除 脚本 我的 为什么 jQuery      更新时间：2023-09-26

>jQuery在滚动后不会删除该类

这是我的脚本：

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

这是我的 HTML：

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

但我的<div> 

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

仍然有类"白色"和"颜色主"，应该删除。 :(

我做了一个代码笔让你看到它。

我建议您尝试 2 个修复程序：

  1. 不要执行多个.scroll(function(){...})调用，它们会相互覆盖。
  2. 使用 $("body").scroll(function(){...}) ，因为这是您（通常）滚动的元素

下面的示例仅使用 IF 语句并删除其他类。试试这个，看看你是否得到了你想要的结果。我们不再依赖可能被另一个滚动函数 else 语句破坏的 ELSE，我们只需删除所有类，只添加您想要的类。

例：

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

我同意那些建议将它们全部放在一个.scroll()函数中的人。这对我有用：

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

要一次只有一个类处于活动状态，请使用 removeClass 删除其他类。您可以使用单个scroll事件处理程序，并重新排列代码以首先查找最后一节，从而使代码更简单：

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

演示：https://jsfiddle.net/Guffa/yka8nzt4/1/

另一种方法是确定每个类的状态：

$(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);
});
相关文章：