如何在锚点链接的active类生效时为其添加专属额外类

你可以通过修改现有jQuery代码，在锚点激活时同步添加专属的额外类，以下是几种实用实现方案：

方案1：基于锚点ID生成专属激活类 #

利用每个锚点已有的id属性（grey/grey1等）生成对应专属激活类，比如active-grey、active-grey1：

修改后的jQuery代码：

$(document).ready(function () {
  var sectionIds = $('a.nav-link');

  $(document).scroll(function () {
    sectionIds.each(function () {
      var $this = $(this);
      var container = $this.attr('href');
      var containerOffset = $(container).offset().top - 300;
      var containerHeight = $(container).outerHeight();
      var containerBottom = containerOffset + containerHeight;
      var scrollPosition = $(document).scrollTop();
      // 获取当前锚点的ID
      var linkId = $this.attr('id');
      // 拼接专属激活类名
      var customActiveClass = 'active-' + linkId;

      if (scrollPosition < containerBottom && scrollPosition >= containerOffset) {
        $this.addClass('active ' + customActiveClass);
      } else {
        $this.removeClass('active ' + customActiveClass);
      }
    });
  });
});

之后在CSS中为每个专属类设置不同样式：

/* grey锚点激活时的样式 */
.active-grey {
  background-color: #888;
}

/* grey1锚点激活时的样式 */
.active-grey1 {
  background-color: #aaa;
}

/* grey2、grey3同理 */
.active-grey2 {
  background-color: #ccc;
}
.active-grey3 {
  background-color: #eee;
}

方案2：基于现有anchor类生成专属激活类 #

如果更倾向于使用锚点已有的anchor1/anchor2类生成专属激活类，可修改代码如下：

$(document).ready(function () {
  var sectionIds = $('a.nav-link');

  $(document).scroll(function () {
    sectionIds.each(function () {
      var $this = $(this);
      var container = $this.attr('href');
      var containerOffset = $(container).offset().top - 300;
      var containerHeight = $(container).outerHeight();
      var containerBottom = containerOffset + containerHeight;
      var scrollPosition = $(document).scrollTop();
      // 提取anchor类（anchor1/anchor2等）
      var anchorClass = $this.attr('class').match(/anchor\d+/)[0];
      var customActiveClass = 'active-' + anchorClass;

      if (scrollPosition < containerBottom && scrollPosition >= containerOffset) {
        $this.addClass('active ' + customActiveClass);
      } else {
        $this.removeClass('active ' + customActiveClass);
      }
    });
  });
});

对应的CSS样式：

.active-anchor1 {
  /* anchor1锚点激活样式 */
}
.active-anchor2 {
  /* anchor2锚点激活样式 */
}
.active-anchor3 {
  /* anchor3锚点激活样式 */
}
.active-anchor4 {
  /* anchor4锚点激活样式 */
}

方案3：自定义专属激活类（最灵活） #

给每个锚点添加data-active-class属性，手动指定专属激活类名，实现完全自定义：

修改后的HTML：

<div class="anchor-menu" id="background">
  <div><a href="#service1" class="anchor1 nav-link" id="grey" data-active-class="service1-active"></a></div>
  <div><a href="#service2" class="anchor2 nav-link" id="grey1" data-active-class="service2-active"></a></div>
  <div><a href="#service3" class="anchor3 nav-link" id="grey2" data-active-class="service3-active"></a></div>
  <div><a href="#service4" class="anchor4 nav-link" id="grey3" data-active-class="service4-active"></a></div>
</div>

修改后的jQuery代码：

$(document).ready(function () {
  var sectionIds = $('a.nav-link');

  $(document).scroll(function () {
    sectionIds.each(function () {
      var $this = $(this);
      var container = $this.attr('href');
      var containerOffset = $(container).offset().top - 300;
      var containerHeight = $(container).outerHeight();
      var containerBottom = containerOffset + containerHeight;
      var scrollPosition = $(document).scrollTop();
      // 获取自定义的激活类名
      var customActiveClass = $this.data('active-class');

      if (scrollPosition < containerBottom && scrollPosition >= containerOffset) {
        $this.addClass('active ' + customActiveClass);
      } else {
        $this.removeClass('active ' + customActiveClass);
      }
    });
  });
});

对应的CSS：

.service1-active {
  /* 自定义service1激活样式 */
}
.service2-active {
  /* 自定义service2激活样式 */
}
/* 其余同理 */

内容的提问来源于stack exchange，提问作者wondering