设置width:100vw为何会破坏position:sticky的left定位？

你遇到的问题并非无法同时设置相对宽度与left粘性定位，而是滚动容器的上下文导致了视觉上的失效。

问题原因 #

当页面横向滚动容器为body（因为.large元素宽度为200vw，撑大了body宽度）时，position:sticky元素的left:0是相对于body的左边缘而非视口。设置width:100vw后，元素宽度等于视口宽度，横向滚动时，元素会固定在body的初始左边缘位置，这个位置会随着页面滚动移出视口，看起来就像left粘性失效了。而宽度设为100px时，元素宽度小于body宽度，滚动时能保持在视口左侧，所以粘性效果正常。

解决方案 #

方案一：调整滚动容器（推荐）

将大宽度内容包裹在独立容器中，让body不产生横向滚动，此时sticky元素的定位上下文变为视口，即可同时实现铺满屏幕和left粘性效果。

修改后的代码：

<div class="header">Header</div>
<div class="scroll-container">
  <div class="large">Content</div>
</div>

body {
  margin: 0;
  overflow-x: hidden; /* 禁止body横向滚动 */
}

.scroll-container {
  overflow-x: auto; /* 让内部容器承担横向滚动 */
}

.large {
  height: 200vw;
  width: 200vw;
}

.header {
  left: 0;
  top: 0;
  color: white;
  position: sticky;
  width: 100vw;
  height: 100px;
  background: black;
}

方案二：不修改DOM结构的适配

如果不想调整DOM，可以通过calc计算元素的位置，强制让元素在横向滚动时固定在视口左侧：

.header {
  left: calc(-1 * (100vw - 100%));
  top: 0;
  color: white;
  position: sticky;
  width: 100vw;
  height: 100px;
  background: black;
}

这个方法通过动态计算left值，抵消body滚动带来的偏移，让元素始终对齐视口左侧。

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