如何在不可滚动父容器内实现随页面滚动固定的Sticky按钮

解决方案 #

你之前sticky定位未生效是因为两个核心条件没满足，不需要给容器设置固定高度，按以下调整即可实现需求：

1. 清理父元素溢出属性

确认.container、它所属的section以及所有中间父元素，都不要设置overflow: hidden/auto/scroll，保持默认的overflow: visible即可，否则会截断滚动上下文，导致sticky无法基于页面视口滚动触发效果。

2. 修改CSS代码

/* 无需给.container设置position: relative，sticky定位不依赖父元素相对定位 */
.button-primary {
  position: sticky;
  top: 10px; /* 可自定义调整，设置粘住时距离视口顶部的间距 */
  float: right; /* 实现按钮在容器内右对齐，不需要可删除 */
  z-index: 10; /* 避免滚动时被其他内容遮挡 */
  margin-bottom: 20px; /* 避免和下方项目列表重叠 */
}

如果你的.container用了flex布局，也可以把float: right替换成align-self: flex-end实现右对齐，效果一致。 #

原理解释 #

sticky定位的生效逻辑是：

• 默认处于正常文档流，表现和普通元素一致
• 当页面滚动到元素顶部距离视口顶部等于你设置的top值时，自动切换为类似fixed的固定状态，直到它的直接父容器完全滚出视口，元素会跟着父容器一起离开视口，天然适配父容器高度不固定的场景
  你之前给.container加overflow: scroll才生效，是因为手动给父容器创建了独立的滚动上下文，粘滞效果只会在父容器内部滚动时触发，不符合你页面滚动时固定的需求，直接移除该属性即可。

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