技术需求：导航栏临近页面底部时停止滚动，保证页脚可见

嘿，我完全懂你的需求——就是让导航栏在页面中间区域固定在顶部，但滚动到快到页脚的时候，能自动取消固定，好让页脚完整显示出来对吧？你现在写的代码已经搞定了“滚动到一定距离固定导航栏”这部分，只是缺了底部边界的判断逻辑，我来帮你补上！

首先，先分析下当前代码的局限：它只判断了滚动距离≥1000px时添加固定类，但没考虑当页面滚动到接近底部时，需要让导航栏“让位”给页脚。我们需要计算页面的总高度、窗口高度，再结合当前滚动位置，判断是否到达了底部阈值区域。

修改后的完整代码 #

JavaScript（jQuery）部分

$(window).scroll(function() {
  // 获取页面的总高度（包含所有滚动内容）
  const documentTotalHeight = $(document).height();
  // 获取当前浏览器窗口的高度
  const currentWindowHeight = $(window).height();
  // 获取当前滚动条距离顶部的距离
  const scrollDistanceFromTop = $(window).scrollTop();
  // 设置底部阈值：比如距离底部100px时停止固定（可根据你的页脚高度调整）
  const bottomOffset = 100;

  // 判断是否滚动到了接近底部的区域
  const isApproachingFooter = (scrollDistanceFromTop + currentWindowHeight) >= (documentTotalHeight - bottomOffset);

  // 逻辑调整：只有不在接近底部的区域，且滚动距离超过1000px时，才添加固定类
  if (!isApproachingFooter && scrollDistanceFromTop >= 1000) {
    $('#sticky').addClass('sticky');
  } else {
    $('#sticky').removeClass('sticky');
  }
});

CSS部分

建议给导航栏加上初始的相对定位，确保非固定状态下布局正常，同时给固定类加上z-index避免被其他元素遮挡：

/* 导航栏初始样式 */
#sticky {
  position: relative;
  width: 292.5px;
  /* 其他你原本的样式，比如margin、padding等 */
}

/* 固定时的样式 */
.sticky {
  position: fixed;
  top: 0;
  width: 292.5px;
  background-color: #fff;
  box-shadow: 0px 0px 80px 0px rgba(0, 0, 0, 0.1); /* 补全你的阴影透明度值 */
  z-index: 100; /* 确保导航栏在页面最上层 */
}

关键细节说明 #

• 底部阈值bottomOffset：这个值可以根据你的页脚高度来调整，比如如果你的页脚高80px，就把它设为80，这样导航栏会在距离底部80px时取消固定，刚好不会盖住页脚。
• 滚动逻辑判断：我们把条件改成了“不在接近底部区域”且“滚动距离≥1000px”时才固定，这样就能同时满足顶部固定和底部让位的需求。

可选优化：添加防抖函数 #

因为scroll事件会在滚动时频繁触发（每秒可能几十次），加上防抖可以减少事件触发频率，提升页面性能：

// 防抖工具函数
function debounce(callback, delay) {
  let timerId;
  return function() {
    clearTimeout(timerId);
    timerId = setTimeout(callback, delay);
  };
}

// 用防抖包裹滚动事件处理函数
$(window).scroll(debounce(function() {
  const documentTotalHeight = $(document).height();
  const currentWindowHeight = $(window).height();
  const scrollDistanceFromTop = $(window).scrollTop();
  const bottomOffset = 100;

  const isApproachingFooter = (scrollDistanceFromTop + currentWindowHeight) >= (documentTotalHeight - bottomOffset);

  if (!isApproachingFooter && scrollDistanceFromTop >= 1000) {
    $('#sticky').addClass('sticky');
  } else {
    $('#sticky').removeClass('sticky');
  }
}, 50)); // 50ms的延迟，可根据流畅度需求调整

这样修改后，你的导航栏就能完美实现“顶部固定+接近底部时停止固定”的效果啦！

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