jQuery：检测滚动位置是否处于两个元素之间的问题

嘿，我之前做单页导航的时候也碰到过一模一样的坑！咱们来一步步搞定它～

首先，你代码失效的核心原因大概率是用了position().top而非offset().top。这里得搞清楚两者的关键区别：

• position().top获取的是元素相对于最近的定位父元素的顶部距离，不是整个文档的全局位置
• offset().top才是元素相对于整个文档顶部的偏移量，这才是和scrollTop()匹配的数值

把你的判断条件换成offset().top，基本就能解决问题了。给你个完整的示例代码：

// 绑定滚动事件
$(window).scroll(function() {
  // 缓存滚动位置和元素的文档偏移量，避免重复DOM查询提升性能
  const currentScroll = $(window).scrollTop();
  const element1Offset = $('#element1').offset().top;
  const element2Offset = $('#element2').offset().top;

  // 检测是否处于element1到element2之间的范围
  if (currentScroll >= element1Offset && currentScroll < element2Offset) {
    // 这里放你的导航栏响应逻辑，比如高亮对应菜单项
    $('.navbar-link').removeClass('active');
    $('#nav-link-element1').addClass('active');
  } 
  // 可以继续扩展其他区域的判断
  else if (currentScroll >= element2Offset) {
    $('.navbar-link').removeClass('active');
    $('#nav-link-element2').addClass('active');
  } 
  // 回到页面顶部的情况
  else {
    $('.navbar-link').removeClass('active');
    $('#nav-link-home').addClass('active');
  }
});

另外再给你两个优化建议，让代码更稳定：

• 防抖处理：滚动事件触发频率极高，加个防抖可以避免频繁执行逻辑导致的性能问题：

  let scrollDebounce;
  $(window).scroll(function() {
    clearTimeout(scrollDebounce);
    scrollDebounce = setTimeout(function() {
      // 把上面的判断逻辑放在这里
    }, 80); // 80ms的延迟，可根据需求调整
  });
  

• 元素存在性检查：如果页面加载时元素还没渲染完成，可能会报错，所以可以先判断元素是否存在：

  const $element1 = $('#element1');
  const $element2 = $('#element2');
  if (!$element1.length || !$element2.length) return; // 元素不存在就不执行后续逻辑
  

这样调整之后，你的滚动范围检测应该就能正常工作啦！

内容的提问来源于stack exchange，提问作者Jordan Usselman