滚动时将绝对定位元素锚定到容器顶部或底部

一、纯CSS能否实现？ #

不能。纯CSS的position: sticky仅支持单方向（顶部或底部）的锚定，无法实现滚动时同时在顶部/底部保留部分元素可见的动态逻辑——这种需求需要根据滚动位置实时计算元素偏移量，而CSS没有能力监听滚动事件并执行动态计算。

二、CSS + JS 最优实现方案 #

核心思路：监听滚动容器的滚动事件，对每个目标元素计算其应处的位置，确保滚动时始终有部分元素可见，同时支持元素初始的任意定位。

1. 基础样式调整 #

保留原有布局结构，调整样式以支持动态定位：

#body {
  height: 200px;
  overflow-y: scroll;
  font-family: sans-serif;
  font-size: 40px;
  scroll-behavior: smooth; /* 优化滚动体验 */
}

#container {
  width: 100%;
  height: 600px;
  background-color: rgba(255, 0, 0, 0.1);
  position: relative;
}

/* 统一类名，方便批量处理多元素 */
.sticky-partial {
  display: inline-block;
  background-color: rgba(0, 0, 255, 0.1);
  padding: 10px 20px;
  border-radius: 5px;
  position: absolute;
  /* CSS变量定义要保留的可见高度，可自定义 */
  --visible-height: 30px;
}

<div id="body">
  <div id="container">
    <div class="sticky-partial" style="top: 150px;">Hello</div>
    <div class="sticky-partial" style="top: 350px;">World</div>
  </div>
</div>

2. JS逻辑实现 #

监听滚动事件，动态计算每个元素的定位：

const scrollContainer = document.getElementById('body');
const container = document.getElementById('container');
const targetItems = document.querySelectorAll('.sticky-partial');

// 预存每个元素的初始位置和高度，避免重复计算
const itemData = Array.from(targetItems).map(item => ({
  element: item,
  initialTop: parseFloat(window.getComputedStyle(item).top),
  height: item.offsetHeight
}));

function handleScroll() {
  const scrollTop = scrollContainer.scrollTop;
  const viewportHeight = scrollContainer.clientHeight;
  const containerHeight = container.offsetHeight;

  itemData.forEach(({ element, initialTop, height }) => {
    const visibleHeight = parseFloat(getComputedStyle(element).getPropertyValue('--visible-height'));
    // 元素的理想位置：初始位置减去滚动距离
    let desiredTop = initialTop - scrollTop;

    // 向下滚动过多：锚定顶部，仅显示元素底部部分
    if (desiredTop + height < visibleHeight) {
      desiredTop = visibleHeight - height;
    }
    // 向上滚动过多：锚定底部，仅显示元素顶部部分
    else if (desiredTop > viewportHeight - visibleHeight) {
      desiredTop = viewportHeight - visibleHeight;
    }

    // 可选：限制元素不会超出容器边界
    const maxTop = containerHeight - height - scrollTop;
    const minTop = -scrollTop;
    desiredTop = Math.max(minTop, Math.min(desiredTop, maxTop));

    // 使用transform修改位置，避免触发重排，提升性能
    element.style.transform = `translateY(${desiredTop}px)`;
  });
}

// 初始化执行一次，修正初始位置
handleScroll();
// 监听滚动事件，若元素极多可添加节流函数优化性能
scrollContainer.addEventListener('scroll', handleScroll);

3. 方案优势 #

• 支持多元素：通过类名批量处理，每个元素独立保存初始定位，互不干扰
• 灵活配置：通过CSS变量--visible-height可自定义保留的可见部分高度
• 性能友好：使用transform修改位置（不触发重排），滚动事件可按需添加节流
• 兼容任意初始定位：元素初始top值可随意设置，不影响逻辑

补充说明 #

你提到的重复问题仅涉及单一边缘锚定，与本需求的双向部分可见逻辑完全不同，不属于重复场景。

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