sticky定位能否独立处理不同长度多列的双向粘性定位需求？

该需求完全可以实现，优先推荐纯CSS方案，利用原生position: sticky的双端约束特性即可实现，无需额外JS逻辑。

纯CSS实现方案 #

原生sticky定位支持同时设置top和bottom两个约束阈值，浏览器会自动根据滚动位置、元素自身高度、父容器高度判断粘性行为，刚好匹配你需要的交互规则：

• 当元素高度小于视口可容纳高度（视口高 - 顶部偏移 - 底部偏移）时，元素会一直吸附在顶部指定位置
• 当元素高度大于视口可容纳高度时，向下滚动到底部碰到阈值就吸附在底部，向上滚动到顶部碰到阈值就吸附在顶部
• 所有元素的粘性行为都会在父容器（即.threecol）滚出视口时终止，和最长列同步停止粘性

该方案支持Chrome 56+、Firefox 59+、Safari 13+，覆盖95%以上的全球用户，没有特殊兼容需求的话优先使用。
修改后的CSS代码如下：

.threecol {
  width: 100%;
  display: flex;
  /* 父容器不需要额外设置高度，默认由最高的子列撑开即可 */
}

.threecol .col {
  min-height: 12px;
  position: sticky;
  /* 你需要的顶部偏移X，这里保持原有45px，可按需调整 */
  top: 45px;
  /* 你需要的底部偏移X，可和顶部保持一致或单独调整 */
  bottom: 45px;
  /* 必须保留，避免flex默认拉伸子元素高度 */
  align-self: flex-start;
}

.threecol .col25 {
  width: 22%;
}

.threecol .col60 {
  width: 58%;
  padding: 0 2%;
  margin: 0 2%;
}

.threecol .col15 {
  width: 13%;
}

兼容低版本浏览器的jQuery方案 #

如果需要兼容不支持sticky双端约束的老旧浏览器，可以用以下JS实现：

// 全局设置偏移值X，和CSS保持一致
const stickyOffset = 45;
const $cols = $('.threecol .col');

// 初始化列参数
function initColParams() {
  $('.threecol').data('parentHeight', $('.threecol').outerHeight());
  $('.threecol').data('parentTop', $('.threecol').offset().top);
  $cols.each(function() {
    const $col = $(this);
    $col.data('colHeight', $col.outerHeight());
    $col.data('initTop', $col.offset().top);
  });
}
initColParams();

// 监听滚动和窗口resize事件
$(window).on('scroll resize', function() {
  const scrollTop = $(window).scrollTop();
  const viewportHeight = $(window).height();
  const parentTop = $('.threecol').data('parentTop');
  const parentBottom = parentTop + $('.threecol').data('parentHeight');
  
  $cols.each(function() {
    const $col = $(this);
    const colH = $col.data('colHeight');
    const colInitTop = $col.data('initTop');
    
    // 父容器已滚出视口，恢复正常流
    if (scrollTop + viewportHeight >= parentBottom) {
      $col.css({ position: 'relative', top: 'auto' });
      return;
    }
    
    // 列高小于可用视口，固定顶部
    if (colH <= viewportHeight - 2 * stickyOffset) {
      $col.css({ position: 'sticky', top: stickyOffset + 'px' });
      return;
    }
    
    // 列高大于可用视口，双向粘性判断
    const scrollDelta = scrollTop - colInitTop + stickyOffset;
    if (scrollDelta <= 0) {
      $col.css({ position: 'relative', top: '0' });
    } else if (scrollDelta + viewportHeight - stickyOffset >= colH) {
      $col.css({ position: 'relative', top: (colH - viewportHeight + 2 * stickyOffset) + 'px' });
    } else {
      $col.css({ position: 'sticky', top: stickyOffset + 'px' });
    }
  });
});

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