jQuery 滚动监听：判断元素是否可见并动态修改样式

使用 jQuery 滚动事件动态修改元素样式

本文介绍如何使用 jQuery 的 scroll 事件，根据元素是否在屏幕可见范围内动态修改其样式。

实现步骤

监听滚动事件: 使用 $(window).scroll() 方法监听网页滚动事件。
获取元素: 使用选择器 $('[data-md-component="header"]') 获取包含 data-md-component="header" 属性的元素。
判断元素可见性: 通过计算元素的偏移量和高度，以及当前滚动的位置和窗口高度，判断元素是否在屏幕可见范围内。
修改样式: 根据可见性判断，添加或移除指定的 CSS 类。

代码示例

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

  // 获取包含data-md-component="header"属性的div
  var headerDiv = $('[data-md-component="header"]');

  // 判断headerDiv是否在屏幕可见范围内
  if (headerDiv.length > 0) {
    var headerDivTop = headerDiv.offset().top;
    var headerDivHeight = headerDiv.outerHeight();

    // 判断是否需要修改headerDiv的class
    if (headerDivTop + headerDivHeight < scrollHeight || headerDivTop > scrollHeight + windowHeight) {
      headerDiv.addClass('new-class');
    } else {
      headerDiv.removeClass('new-class');
    }
  }
});

代码解释

$(window).height(): 获取窗口高度。
$(window).scrollTop(): 获取滚动距离。
headerDiv.offset().top: 获取 headerDiv 相对于文档的偏移量。
headerDiv.outerHeight(): 获取 headerDiv 的高度（包含内边距和边框）。
headerDiv.addClass('new-class'): 给 headerDiv 添加 new-class 类。
headerDiv.removeClass('new-class'): 从 headerDiv 中移除 new-class 类。

注意事项

可以根据实际需求修改选择器和 CSS 类名。
还可以根据需要在 if 语句中添加其他逻辑，例如在元素可见时执行其他操作。