如何实现容器内内容滚动时的粘性固定与底部定位效果？

这个需求完全可以通过CSS的position: sticky属性完成，不需要编写任何JavaScript代码。

实现原理 #

position: sticky的元素会在滚动到指定偏移阈值时固定在视口对应位置，但它的活动范围会被父容器限制：当父容器还未完全滚出视口时，元素会始终处于父容器内部；当滚动到父容器底部即将离开视口时，元素会跟着停在父容器的底部位置，不会脱离容器。

适配你的HTML结构的代码示例 #

调整后的HTML（仅修改内联样式）

<div class="container" style="height:2000px;">
  <div class="content" style="height:300px; position: sticky; top: 0;">
    text, content, etc.
  </div>
</div>

关键属性说明

• .content的position: sticky; top: 0;：当页面滚动到内容顶部触达视口顶部时，内容会固定在视口顶部；继续滚动至容器底部即将离开视口时，内容会自动停在容器底部。
• 父容器.container不能设置overflow: hidden、overflow: scroll或overflow: auto，否则sticky的边界限制会失效，元素无法正确停在容器底部。

兼容性提示 #

现代浏览器（Chrome、Firefox、Safari、Edge等）都原生支持position: sticky，如果需要兼容IE这类老旧浏览器，才需要借助JavaScript辅助实现，但绝大多数场景下纯CSS方案足够用。

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