如何将活动类添加到选定的列表项

Question

您好，我正在尝试将类添加到 selectedlList 项目中，如果我滚动到特定的 div，还添加类。例如，在菜单中的 div#six 数字六（6）上滚动也应该激活类。

[在此处查看我的代码和演示][1]

  [1]: https://codepen.io/GoPerov/pen/aZmVgE

Answer 1

试试这个代码，这是你更新后的pen

$(document).ready(function(){
  $(".page-scroll").click(function(){
     $(".page-scroll").removeClass("active");  //removes current active class      
    $(this).addClass("active");   // adds active class to specific click
  })
});

Answer 2

如下更新您的代码。

您需要手动检查哪个div 当前是active 滚动位置。

Updated codepen demo

$(document).ready(function() {
  $(".page-scroll").click(function() {
    $(".page-scroll").removeClass("active"); //removes current active class
    $(this).addClass("active"); // adds active class to specific click
  });
});

$(window).scroll(function() {
  var selectedDiv = $(".page-scroll:first");
  var topOffset = 1;
  var windowTop = $(window).scrollTop();

  $(".page-scroll").each(function() {
    var id = $(this).attr("href");
    var offset = ($(id).offset() || {
      top: 0
    }).top - windowTop;
    if (offset < 1 && (topOffset == 1 || offset > topOffset)) {
      topOffset = offset;
      selectedDiv = $(this);
    }
  });

  if (!selectedDiv.hasClass("active")) {
    $(".page-scroll").removeClass("active");
    selectedDiv.addClass("active");
  }
});