页面滚动检测问题：大屏下滚动至指定元素时导航切换函数不触发求助

嘿，我完全懂你遇到的这个痛点——大屏设备上页面内容高度可能还没超过视口高度，滚动条根本滚不到#contact-me元素的顶部位置，导致最后那段切换导航状态的代码永远没机会执行。别担心，我给你几个实用的调整方案：

方案1：同时检测滚动到底部的情况 #

当页面内容较短时，即使没滚到目标元素的位置，只要滚动到页面底部，就触发导航切换逻辑。修改后的代码如下：

$(window).scroll(function () {
  // 先获取关键参数
  const contactElement = $('#contact-me');
  // 确保目标元素存在，避免报错
  if (!contactElement.length) return;
  
  const contactTop = contactElement.offset().top;
  const scrollPos = $(this).scrollTop();
  const viewportHeight = $(this).height();
  const documentHeight = $(document).height();
  
  // 两个条件满足其一即可：滚到了目标元素顶部，或者已经滚到页面底部
  if (scrollPos >= contactTop || (scrollPos + viewportHeight) >= documentHeight) {
    $("a.current").removeClass("current");
    $("a#cont-link").addClass("current");
  }
});

这个逻辑的核心是：当scrollTop + 视口高度等于文档总高度时，说明已经滚动到页面最底部，这时候不管目标元素有没有被滚动到，都触发导航切换。

方案2：提前触发（当元素进入视口即切换） #

如果希望用户看到#contact-me元素时就切换导航，而不是等滚到元素顶部，可以把触发条件改成“元素进入视口”：

$(window).scroll(function () {
  const contactElement = $('#contact-me');
  if (!contactElement.length) return;
  
  const contactTop = contactElement.offset().top;
  const scrollPos = $(this).scrollTop();
  const viewportHeight = $(this).height();
  
  // 当元素顶部进入视口时触发（也可以调整比例，比如进入一半视口时触发）
  if (scrollPos >= (contactTop - viewportHeight)) {
    $("a.current").removeClass("current");
    $("a#cont-link").addClass("current");
  }
});

在大屏设备上，如果#contact-me本来就在视口中，这个条件会直接满足，导航状态会正确切换。

额外优化：添加防抖提升性能 #

滚动事件会频繁触发，可能影响页面性能，给scroll事件加个防抖函数可以减少执行次数：

// 防抖函数
function debounce(func, delay = 100) {
  let timeoutId;
  return function (...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

// 用防抖包裹滚动事件处理逻辑
$(window).scroll(debounce(function () {
  const contactElement = $('#contact-me');
  if (!contactElement.length) return;
  
  const contactTop = contactElement.offset().top;
  const scrollPos = $(this).scrollTop();
  const viewportHeight = $(this).height();
  const documentHeight = $(document).height();
  
  if (scrollPos >= contactTop || (scrollPos + viewportHeight) >= documentHeight) {
    $("a.current").removeClass("current");
    $("a#cont-link").addClass("current");
  }
}, 100));

防抖函数会在滚动停止100ms后才执行逻辑，既保证了功能正常，又减少了不必要的计算。

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