position:sticky设置bottom:0无效但top:0正常的技术问题求助

你的问题核心出在元素层级结构上：

• .header能正常生效，是因为它作为.contents的子元素，页面滚动时，它的sticky定位参考的是浏览器视口（.contents本身不是独立滚动容器，页面滚动由body触发），所以top: 0会让它牢牢粘在视口顶部。
• 但.footer被放在了.contents容器内部，position: sticky的bottom: 0是相对于最近的可滚动祖先元素（这里就是.contents），而非浏览器视口。.contents设置了height: 2500px，长度远超过视口，.footer本来就处于.contents的末尾，自然不会有“粘住”的视觉效果——只有当.contents自身滚动到底部时，它才会粘在.contents的底部，但你当前的滚动是整个页面的滚动，不是.contents内部滚动。

解决办法 #

把.footer从.contents中移出来，让它和.contents成为同级元素，这样它的sticky定位就会参考浏览器视口，bottom: 0就能正常生效：

修改后的代码

* {
  margin: 0px;
}

.header {
  background-color: tomato;
  height: 60px;
  position: sticky;
  top: 0;
}

.contents {
  height: 2500px;
}

.footer {
  position: sticky;
  bottom: 0;
  height: 65px;
  background-color: green;
}

<body>
  <div>
    <div class="contents">
      <div class="header"></div>
      1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>1234<br/>
    </div>
    <div class="footer"></div>
  </div>
</body>

如果因为特殊需求必须把.footer留在.contents内部，那需要给.contents添加overflow: auto让它成为独立滚动容器，但这种场景会改变页面的滚动逻辑，一般不推荐。

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