如何让Div悬浮于另一个Div上方，滚动至页脚时停止悬浮

解决方案代码 #

HTML结构

<div class="container">
  <div class="main">Main</div>
  <div class="float">Button</div>
</div>
<div class="footer">Footer</div>

CSS样式

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  min-height: 100vh;
  /* 预留浮动元素高度+与页脚的间距，避免内容遮挡 */
  padding-bottom: calc(30px + 50px);
  position: relative;
}

.main {
  background: blue;
  height: 2000px;
}

.footer {
  background: red;
  height: 400px;
}

.float {
  background: green;
  height: 30px;
  width: 100px;
  /* 初始水平垂直居中 */
  position: sticky;
  top: calc(50vh - 15px);
  left: calc(50% - 50px);
  /* 到达页脚上方时固定位置 */
  bottom: 50px;
}

实现逻辑说明 #

1. 用position: sticky替代原代码的fixed，让元素在容器内动态切换定位状态：初始时相对容器居中，滚动到特定位置时固定。
2. 容器设置min-height: 100vh确保初始状态下浮动元素能居中显示在视口；padding-bottom预留空间，避免浮动元素滚动时覆盖页脚。
3. 通过calc()计算top和left值，实现浮动元素的初始居中效果；设置bottom: 50px，当滚动到容器底部（即接近页脚）时，元素会停在距离页脚50px的位置，不再继续向下滚动。

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