基于滚动位置为outerbox添加/移除activeclass类的jQuery实现

示例HTML结构 #

<div class="outerbox">第一区块</div>
<div class="outerbox">第二区块</div>
<div class="outerbox">第三区块</div>
<div class="outerbox">第四区块</div>

jQuery实现代码 #

$(document).ready(function() {
  // 防抖函数，避免scroll事件频繁触发
  function debounce(func, wait) {
    let timeout;
    return function() {
      const context = this;
      const args = arguments;
      clearTimeout(timeout);
      timeout = setTimeout(() => func.apply(context, args), wait);
    };
  }

  // 处理滚动逻辑的函数
  function handleScroll() {
    const scrollTop = $(window).scrollTop();
    const windowHeight = $(window).height();
    let currentActive = null;

    // 遍历所有outerbox元素，判断哪个处于视口范围内
    $('.outerbox').each(function() {
      const elementTop = $(this).offset().top;
      const elementHeight = $(this).outerHeight();
      
      // 判断元素是否进入视口（以元素垂直中线进入视口为激活条件，可按需调整）
      if (elementTop + elementHeight/2 <= scrollTop + windowHeight && elementTop + elementHeight/2 >= scrollTop) {
        currentActive = $(this);
      }
    });

    // 切换activeclass类
    if (currentActive && !currentActive.hasClass('activeclass')) {
      $('.outerbox.activeclass').removeClass('activeclass');
      currentActive.addClass('activeclass');
    }
  }

  // 绑定防抖后的滚动事件
  $(window).on('scroll', debounce(handleScroll, 100));
  
  // 页面加载时先执行一次，确保初始状态正确
  handleScroll();
});

代码说明 #

• 防抖函数：限制scroll事件的触发频率，避免滚动操作导致的性能损耗，这里设置的等待时间为100毫秒，可根据实际需求调整。
• 视口判断逻辑：采用元素垂直中线进入视口作为激活触发点，你可以根据场景修改规则（比如元素顶部完全进入视口、元素整体处于视口内等）。
• 初始执行：页面加载完成后立即执行一次滚动处理函数，保证初始状态下的激活类分配正确。

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