如何用CSS Sticky实现Section底部粘滞于视口底部？

你说的这个问题我之前也碰到过——用position: sticky做顶部粘滞顺风顺水，但换成底部粘滞，尤其是Section高度超视口时就卡壳了。别着急，我来帮你理清楚问题出在哪，以及怎么解决：

为啥直接设bottom: 0没达到预期？ #

当Section高度比视口高时（比如150vh vs 100vh），默认情况下Section的底部会落在视口下方。这时候滚动页面，只有当视口底部滚到Section底部的位置时，sticky的bottom:0才会触发，Section才会开始粘在视口底部。如果你的预期是“Section底部一开始就贴在视口底”，那默认的布局逻辑肯定达不到，得调整下。

两种场景的解决方案 #

场景1：滚动到Section底部时开始粘滞

这是sticky的标准用法，适合Section是页面中的一个区块，滚动到它的底部后固定住：

body {
  height: 400vh;
  margin: 0; /* 去掉默认margin，避免莫名的布局偏移 */
}

section {
  border: 1px solid red;
  height: 150vh;
  position: sticky;
  bottom: 0; /* 核心属性 */
}

操作起来就是：向下滚动页面，滚50vh后（视口底部刚好碰到Section的底部），Section就会牢牢粘在视口底部；继续滚的话，Section底部不动，顶部慢慢移出视口，直到整个Section离开视口范围。

场景2：页面加载时Section底部就贴住视口

如果希望打开页面时Section底部就和视口底部对齐，同时保持sticky的滚动特性，可以用Flex布局调整Section的初始位置：

body {
  height: 400vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* 把Section推到body底部 */
}

section {
  border: 1px solid red;
  height: 150vh;
  position: sticky;
  bottom: 0;
}

这样初始状态下，Section的底部和body底部对齐，你滚动页面时，Section会跟着向上移动，直到它的底部碰到视口底部，之后就固定在那了。

注意事项 #

• 一定要确保父容器（这里是body）有足够的滚动空间，不然sticky根本触发不了
• 去掉body的默认margin，不然Section会有偏移，影响粘滞效果
• 如果Section有父元素，要注意父元素的overflow属性不能设为hidden，否则sticky会失效

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