Question

滚动后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">

还有班级＆＃34;白色＆＃34;和＆＃34; color-main＆＃34;，应删除。：（

我找了codepen给你看。

Answer 1

我建议您尝试2次修复：

不要进行多次.scroll(function(){...})来电，他们互相覆盖。
使用$("body").scroll(function(){...})，因为这是您（通常）滚动的元素

Answer 2

以下示例仅使用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');
       } 
   });

Answer 3

我同意那些建议将它们全部放在一个.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);

Answer 4

要一次只激活一个班级，请使用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);

});

jQuery：为什么我的脚本不能删除该类？

4 个答案: