为何设置position:sticky的元素会在父容器末尾停止移动？

为盒子设置position:sticky属性后，向下滚动页面时，盒子在其容器末尾就停止移动，尽管下方还有剩余空间，期望该盒子能一直滚动至body底部。

原始代码 #

HTML

<div class="example">
  <div class="content one"></div>
  <div class="content">
    <div class="box fixed">fixed</div>
  </div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
</div>
<div class="example">
  <div class="content one"></div>
  <div class="content">
    <div class="box sticky">sticky</div>
  </div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
</div>

CSS

body {
  display: flex;
}

.example {
  width: 50%;
}
 
.content {
  background: #333;
  height: 300px;
  margin: 1em;
}

.content.one {
  height: 100px;
}

.box {
  width: 100px;
  height: 100px;
  background: limegreen;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
}

.fixed {
  position: fixed;
}

.sticky {
  position: sticky;
  top: 0;
}

原因分析 #

position:sticky的核心特性是相对于其最近的可滚动祖先（若无则相对于视口），当元素滚动到其包含块的边界时，会停止粘滞并随包含块一起滚动。你的代码中，.sticky盒子的直接父容器是高度固定为300px的.content，所以当页面滚动到该.content容器的底部时，sticky元素会跟着容器离开视口，无法继续向下滚动。

解决方案 #

要让sticky元素滚动至body底部，需将其包含块调整为更大的范围（比如.example容器），只需修改HTML结构，将.box.sticky从嵌套的.content中移出，直接放到.example容器下：

修改后的HTML

<div class="example">
  <div class="content one"></div>
  <div class="box sticky">sticky</div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
</div>
<div class="example">
  <div class="content one"></div>
  <div class="content">
    <div class="box fixed">fixed</div>
  </div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
</div>

此时，.sticky的包含块变为.example容器，而body使用flex布局，.example会被拉伸至与body等高，因此sticky元素会一直粘滞到.example的底部（即body底部），直到页面滚动到底部。

补充说明 #

若必须保留sticky元素在原.content的位置，可以尝试将.content的高度设为auto，或让.example成为滚动容器，但这可能改变原有布局结构。最直接且符合需求的方式仍是调整DOM结构，扩大sticky元素的包含块范围。

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