stacked column chart使我的元素发粘，但直到我们向上滚动到容器的高度为止。滚动通过容器的高度后，position: -webkit-sticky随页面一起滚动。这种情况仅发生在Safari（我正在使用12.1.1版）中，并且在Chrome和Firefox中均能很好地工作。
我已经尝试过使用sticky element之类的修复程序，但不能解决我的问题。
这是代码
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>
这是指向密码笔的链接。
https://codepen.io/AshwinLorung/pen/QXBRRb
在Safari和Chrome / Firefox中打开此链接，然后您可以看到行为上的差异。
答案 0 :(得分：0)
现在，我通过将粘性元素和内容包装在div中解决了该问题。但是我发现这是一种怪癖。仍在等待适当的解决方案。
<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>
答案 1 :(得分：-1)
h1的边距为19. * px，需要将其设置为0。在粘滞之前，需要滚动边距。对于高度，给它一个60px的高度，和line-height相同。
.sticky{
position: sticky;
position: -webkit-sticky;
text-align: center;
margin: 0;
height: 60px;
line-height: 60px;
top: 0;
background: inherit;
}
您在Facebook上得到了相同的答案，所以我不知道您先去哪里。