position: -webkit-sticky 使我的元素具有粘性，但只有在我们向上滚动到容器的高度时才会粘性。一旦我们滚动超过容器的高度，sticky element 就会随着页面一起滚动。这只发生在 Safari 中(我使用的是 12.1.1 版)并且在 Chrome 和 Firefox 中都运行良好。
我尝试过使用 self-align: flex-start 等修复方法，但它没有解决我的问题。
这是代码
<div class="container">
<aside class="left">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat similique doloremque laborum ad repellendus atque, ut porro, sunt accusantium temporibus quaerat illum quis consequatur, illo numquam et? Quasi, aut corporis.
</p>
</aside>
<aside class="right">
<h1 class="sticky">Sticky Header</h1>
<ul>
<li>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
</li>
<li>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
</li><li>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
</li><li>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
</li><li>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
</li><li>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
</li><li>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
</li><li>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
</li><li>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
</li><li>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
</li>
</aside>
</div>
.container{
width: 600px;
height: 400px;
overflow: hidden;
display: -webkit-flex;
}
.left{
background: cyan;
}
.right{
background: orange;
overflow: auto;
height: 100%;
}
.sticky{
position: sticky;
position: -webkit-sticky;
text-align: center;
top: 0;
background: inherit;
}
这是代码笔的链接。
https://codepen.io/AshwinLorung/pen/QXBRRb
在 Safari 和 Chrome/Firefox 中打开此链接，然后您可以看到行为上的差异。
最佳答案
现在我通过将粘性元素和内容包装在一个 div 中解决了这个问题。但我发现这是一种 hacky 方式。仍在等待合适的解决方案。
<div class="container">
<aside class="left">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat similique doloremque laborum ad repellendus atque, ut porro, sunt accusantium temporibus quaerat illum quis consequatur, illo numquam et? Quasi, aut corporis.
</p>
</aside>
<aside class="right">
<div class="wrapper">
<h1 class="sticky">Sticky Header</h1>
<ul>
<li>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
</li>
<li>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
</li><li>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
</li><li>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
</li><li>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
</li><li>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
</li><li>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
</li><li>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
</li><li>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
</li><li>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ullam quam a ipsa voluptatibus quisquam est ex ea sit nisi, provident totam, fugit quos, nulla fugiat sunt earum odit. Ullam, recusandae.
</li>
</ul>
</div>
</aside>
</div>
关于css - 位置 : -webkit-sticky works only uptill the height of the container within a flexbox child on Safari(12. 1.1)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56869420/