javascript - 如何在滚动页面时通过 jQuery 添加一些 CSS 类

Question

我在 CodePen.io 创建了这支笔，点击 nav(导航)中的任何元素时，页面会平滑地滚动到不同的部分

这是 jQuery 代码。

// Smooth Scroll on clicking navigation items
$('nav a').click(function() {
  var $href = $(this).attr('href');
  $('body').stop().animate({scrollTop: $($href).offset().top}, 1000);

  // add class "active" to nav items on click
  $('nav a').removeClass('active');
  $(this).addClass('active');
  return false;
});

我已经在有人点击导航中的任何链接时添加了“active”类，但是当有人使用滚动条而不是点击链接滚动到该部分时如何添加类 active ？

看笔here

我们将不胜感激您的建议，在此先感谢您!

Answer 1

你可以看看这个fiddle

你必须使用事件卷轴

$(document).on("scroll", function(){ ... });

然后计算顶部位置的差异。