使用 jQuery 在页面上的不同高度添加和删除类

Question

当用户与顶部的距离不同时，我想使用 jQuery 删除/添加类。

我已经成功完成了，它工作正常，但我认为我做错了，我希望你帮助优化代码。

html 很简单，基本上是部分（包括标题）有 100% 的宽度。和不同的颜色。我想让标题在第一部分上方时改变颜色（出于美学目的）。 当页面滚动超过 1 个像素时，我还希望它有阴影。

我通过添加/删除类来做到这一点。

当我使用一个大的 else if 语句时，它不能很好地工作，因为只要匹配任何条件，js 就会停止检查其他匹配项，因此它不会应用所有需要的类。

下一个代码有效，但正如我所说，我认为它不是最佳/糟糕的编写。 这是 HTML 标记：

<header class="dark no-shadow">
  Header
</header>
<section class="blue">
  Please Scroll Down to see the header changes...
</section>
<section>
  The header color Should change when you pass through me.
</section>

这里是 jQuery 代码：

var header = $('header'),
        blueSection = $('section.blue'),
    // Calculate when to change the color.
        offset = blueSection.offset().top + blueSection.height() - header.height();

$(window).scroll(function(){
  var scroll = $(window).scrollTop();

    // Remove Class "dark" after scrolling over the dark section
  if (scroll >= offset) {
    header.removeClass('dark');
  } else {
    header.addClass('dark');
  }

    // Remove Class "no-shadows" whenever not on the top of the page.
  if (scroll >= 1) {
    header.removeClass('no-shadow');
  } else {
    header.addClass('no-shadow');
  }

});

对于那些喜欢使用 jsfiddle 的人（比如我！）： https://jsfiddle.net/shock/wztdt077/6/

谢谢各位！

Answer 1

Here 是我想出的：

var header = $('header'),
  blueSection = $('section.blue'),
  // Calculate when to change the color.
  offset = blueSection.offset().top + blueSection.height() - header.height();

var add = function(obj, cls) {obj.addClass(cls);}
var remove = function(obj, cls) {obj.removeClass(cls);}

var stylePoints = [offset, 1,           100,    200];
var styleTo =     ['dark', 'no-shadow', 'blue', 'tall'];
var styleType =   [add,    add,         remove, remove];

$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  for (i = 0; i < stylePoints.length; i++) {
    var func = styleType[i];
    if (scroll >= stylePoints[i])
      (styleType[i] == add) ? remove(header, styleTo[i]) : add(header, styleTo[i]);
    else func(header, styleTo[i]);
  }
});

它并不比您当前的 jQuery 长多少，并且允许（理论上）无限数量的样式更改，而无需添加一百万长的 if/else 语句。要添加新的样式更改，您必须在三个数组的每个末尾添加一个值。 stylePoints 指定应添加或删除样式的 scrollTop() 值。 styleTo 指定要添加或删除的类。 styleType 指定当用户滚动到相应的stylePoints 值上方 时是否应该添加或删除此类。当用户滚动到相应的stylePoints 值下方或处时，会发生相反的情况。例如，您可以从代码中看到，当用户滚动到200 上方时，header 中的tall 类将是removed，并在用户滚动到下方或200 时添加。