求助：基于jQuery实现滚动至区块末尾的Div滑动效果

嘿，很高兴能帮到你！你已经有了一个不错的起步框架，咱们来把这个滑动到区块末尾的效果打磨得更完善。

首先，先梳理下你的需求：当页面滚动到特定位置时，右侧的.single-product-content-right会滑动到.single-product-content-bottom所在的区块末尾，同时只在桌面端（宽度>768px）生效。你的现有代码缺少了核心的定位逻辑，而且有些参数的计算时机不太对，咱们来一步步修正：

完整的修正代码 #

jQuery(document).ready(function($) {
  // 提前缓存DOM元素，减少重复查询提升性能
  var $spcright = $(".single-product-content-right"),
      $spcleft = $(".single-product-content-left"),
      $spcbottom = $(".single-product-content-bottom"),
      $window = $(window);

  // 把滚动处理逻辑封装成函数，方便滚动和窗口 resize 时复用
  function adjustRightPanelPosition() {
    // 每次触发时重新计算关键参数，避免内容/窗口变化导致的数值失效
    var leftContentHeight = $spcleft.height(),
        rightPanelHeight = $spcright.height(),
        bottomSectionTop = $spcbottom.offset().top,
        scrollTop = $window.scrollTop(),
        topPadding = 45;

    // 仅在桌面端执行逻辑
    if ($window.width() > 768) {
      // 计算触发滑动的临界位置：当右侧面板底部即将超出左侧内容底部时
      var triggerScrollPosition = leftContentHeight - rightPanelHeight + $spcleft.offset().top - topPadding;

      if (scrollTop >= triggerScrollPosition) {
        // 将右侧面板定位到区块末尾上方
        $spcright.css({
          position: 'absolute',
          top: bottomSectionTop - rightPanelHeight - topPadding,
          left: $spcright.offset().left // 保持原水平位置不变
        });
      } else {
        // 回到初始的定位状态
        $spcright.css({
          position: '',
          top: '',
          left: ''
        });
      }
    } else {
      // 移动端重置样式，避免布局错乱
      $spcright.css({
        position: '',
        top: '',
        left: ''
      });
    }
  }

  // 监听滚动事件
  $window.scroll(adjustRightPanelPosition);
  // 监听窗口大小变化，确保布局调整后依然正常
  $window.resize(adjustRightPanelPosition);

  // 页面加载完成后立即执行一次，确保初始位置正确
  adjustRightPanelPosition();
});

关键改进点说明 #

• 元素缓存：一开始就把需要操作的DOM元素缓存起来，避免每次滚动都重新查询DOM，提升页面性能。
• 动态参数计算：每次滚动/窗口 resize 时重新计算元素的高度和偏移量，解决了内容加载、窗口尺寸变化导致的定位失效问题。
• 复用处理函数：把核心逻辑封装成独立函数，滚动和窗口 resize 时都能调用，保证各种场景下的效果一致性。
• 移动端兼容：当窗口宽度小于等于768px时，重置右侧面板的样式，避免移动端出现布局错乱。
• 清晰的触发条件：计算出准确的临界滚动位置，只有当右侧面板即将超出左侧内容范围时，才触发滑动到区块末尾的动作。

额外优化建议 #

• 给右侧面板添加CSS过渡效果，让滑动更流畅：

.single-product-content-right {
  transition: top 0.3s ease;
}

• 确保右侧面板的父容器设置了position: relative;，这样绝对定位的面板会相对于父容器定位，而不是整个文档。
• 如果区块末尾有额外的margin/padding，可以调整代码中的topPadding值，让右侧面板和底部区块的间距更符合你的设计需求。

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