使用jQuery实现跟随滚动的div到达指定元素后停止滚动

• 请先将下方代码中的.stopDiv替换为你实际需要触发停止效果的指定div的选择器（类名、ID都可）
• 注意原代码选择器大小写问题：你的侧边栏类名是myDiv，原jQuery选择器写的是.mydiv，大小写不匹配会导致功能失效，以下代码已统一修正为.myDiv

完整实现代码 #

$(window).scroll(function() {
  // 基础参数获取
  const scrollTop = $(window).scrollTop();
  const scrollLeft = $(window).scrollLeft();
  const $sidebar = $('.myDiv');
  const $stopDiv = $('.stopDiv'); // 替换为你自己的停止触发元素选择器

  // 计算停止阈值
  const sidebarHeight = $sidebar.outerHeight();
  const stopOffsetTop = $stopDiv.offset().top;
  // 可自定义侧边栏和停止元素之间的间距，单位px，不需要留空就设为0
  const gap = 20;
  const stopThreshold = stopOffsetTop - sidebarHeight - gap;

  // 动态判断是否需要停止跟随
  let finalTop = scrollTop;
  if (scrollTop >= stopThreshold) {
    finalTop = stopThreshold;
  }

  // 应用最终样式
  $sidebar.css({
    "margin-top": finalTop + "px",
    "margin-left": scrollLeft + "px"
  });
});

可选优化建议 #

• 如果滚动时有卡顿感，可以给scroll事件加节流处理，降低触发频率，提升页面性能
• 如果修改margin-top会影响页面其他元素布局，可以把侧边栏的CSS设为position: relative，然后把代码里的margin-top换成top，效果完全一致
• 如果你需要侧边栏在滚动到它自身初始位置才开始跟随，只需要额外获取侧边栏初始的offset().top，当scrollTop小于这个值时，把finalTop设为0即可

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