onscroll 添加类 jquery - Javascript

当网页滚动时，我们经常需要对网页元素进行一些操作，比如添加类名、改变其样式等。onscroll 事件可以监听滚动事件，而 jQuery 的 addClass() 方法可以添加类名。结合使用这两个工具，我们可以实现网页滚动时添加类名的效果。

实现步骤

1. 通过 jQuery 选择需要添加类名的元素，如示例中的 .header。
2. 通过 onscroll 事件监听网页滚动。
3. 在事件处理函数中，取得当前滚动位置 scrollTop，若其大于某一具体值（如示例中的 50），则为该元素添加类名。

代码片段如下：

$(window).on('scroll', function() {
  var scrollTop = $(window).scrollTop();
  if(scrollTop > 50) {
    $('.header').addClass('active');
  } else {
    $('.header').removeClass('active');
  }
});

当窗口滚动，函数就会执行。如果 scrollTop （即滚动的距离）大于 50，就会为 .header 元素添加 active 类名。

注意点

1. scrollTop 返回的是数字，不带单位。比如，在 CSS 中，元素高度为 200px，但 scrollTop 返回的是 200，而不是 '200px'。
2. 事件处理函数中的加减类名逻辑可能需要根据具体需求进行修改。

参考资料

1. jQuery addClass() 方法
2. HTMLElement.scrollTop