如何实现滚动到指定位置后Navbar取消固定并随页面正常滚动

前置调整说明 #

1. 先修正HTML结构错误：你当前把<nav>标签放在了<body>标签外部，不符合HTML规范，请将<nav>挪到<body>标签内部的最开头位置。
2. 请确保页面已经引入了jQuery库，否则下方代码无法生效。

新增CSS代码 #

/* 避免canvas内容被固定导航栏遮挡 */
#canvas {
  margin-top: 50px;
  display: block;
}
/* 导航栏取消固定时的样式 */
.navbar-static {
  position: relative;
}

jQuery功能实现代码 #

// 页面DOM加载完成后执行
$(document).ready(function() {
  // 缓存常用元素，减少DOM查询开销
  const $nav = $('.navbar');
  const $canvas = $('#canvas');
  // 计算阈值：canvas元素底部距离页面顶部的高度
  let scrollThreshold = $canvas.offset().top + $canvas.outerHeight();

  // 监听页面滚动事件
  $(window).scroll(function() {
    const currentScroll = $(this).scrollTop();
    // 滚动距离超过阈值时取消固定，否则恢复固定
    if (currentScroll >= scrollThreshold - $nav.outerHeight()) {
      $nav.removeClass('fixed-top').addClass('navbar-static');
    } else {
      $nav.addClass('fixed-top').removeClass('navbar-static');
    }
  });

  // 窗口尺寸变化时重新计算阈值，适配响应式场景
  $(window).resize(function() {
    scrollThreshold = $canvas.offset().top + $canvas.outerHeight();
    $(window).trigger('scroll');
  });
});

自定义调整提示 #

如果需要调整导航栏切换的时机，可以自行修改scrollThreshold - $nav.outerHeight()这部分的差值，多减像素会提前切换，少减像素会延后切换。

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