位置：向下滚动时 Safari 上的粘性开始失败
position: sticky on Safari starts failing when scrolling down
我正在使用 position: sticky 来创建粘性 headers，它适用于 Chrome、Firefox 等。在 Safari 上，当我开始滚动时它工作得很好，但在滚动之后再往下 headers 开始消失。好像跟内容的高度/headers的高度有关系。当内容较少时，它也适用于 Safari。
有人可以向我解释 Safari 中发生了什么以及如何解决这个问题吗？
.wrapper {
max-height: 500px;
background-color: rgb(230, 230, 230);
padding: 10px;
display: flex;
}
.container {
flex: 1;
min-height: 0;
overflow: auto;
position: relative;
}
.sticky-header {
background-color: rgb(130, 130, 0);
position: sticky;
top: 0;
display: flex;
justify-content: center;
align-items: center;
height: 50px;
border: 2px solid rgb(0, 0, 0);
}
.sub-header {
top: 50px;
}
.content {
background-color: rgb(0, 255, 0);
}
<div class="wrapper">
<div class="container">
<div class="sticky-header">
HEADER
</div>
<div class="sticky-header sub-header">
SUBHEADER
</div>
<div class="body">
<div class="content">
<div>This is the first line</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius, ex sed mollis placerat, nunc neque semper nibh, eget imperdiet massa libero ac tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Sed sit amet odio feugiat, iaculis odio a, malesuada neque. Sed non nisi auctor, malesuada tortor vel, ultricies nisi. Aenean vehicula lorem neque, non finibus diam congue ac. Pellentesque euismod erat ex, vitae tempor nunc congue vel. Etiam
viverra sapien sed massa viverra, ac tincidunt odio condimentum. Nullam nibh nisi, tincidunt vitae volutpat vitae, eleifend non ligula. Nullam in nibh elementum, consequat metus at, volutpat libero. Suspendisse rhoncus eu libero in porttitor.
Nulla vel nibh vel purus viverra posuere eu placerat eros. Integer luctus mollis sem, at commodo magna laoreet eget. Nam cursus augue quis fringilla lobortis. Quisque tincidunt metus ut tellus feugiat tincidunt. Maecenas convallis metus a lectus
maximus, ut egestas velit eleifend. Cras eros lectus, molestie vel aliquam eu, suscipit eget lacus. Ut sapien augue, placerat nec sollicitudin vel, congue nec urna. Nam dignissim dapibus lacus, a efficitur turpis pulvinar in. Phasellus condimentum,
turpis nec molestie venenatis, leo lorem auctor sem, nec interdum lectus elit a dui. Sed varius, velit ac placerat auctor, velit ligula convallis lacus, eget pellentesque tellus libero in turpis. Donec tristique orci mi, et tristique lacus finibus
eget. Duis ultricies, arcu eget pretium accumsan, sem dui ultrices turpis, vel semper metus est et lorem. Nullam sollicitudin ultrices elementum. Donec non porta velit. Cras et mattis ligula. Quisque risus nunc, vehicula consectetur mi nec,
euismod fringilla ipsum. Aliquam ut nibh viverra, dignissim magna vel, aliquam arcu. Sed posuere, eros eu interdum gravida, arcu mi porttitor dolor, et ultricies enim lacus in metus. Aliquam erat volutpat. Morbi imperdiet ullamcorper enim eget
placerat. Nam at semper arcu, eu commodo orci. Nulla tincidunt pharetra ligula varius tincidunt. Praesent feugiat, quam facilisis ornare lacinia, tellus magna laoreet est, nec imperdiet dolor metus vitae justo. Etiam a nisl erat. Donec consectetur,
tellus vel varius volutpat, nibh justo dictum neque, a mattis nulla elit a quam. Aliquam sed erat eget ante elementum congue. In pharetra, justo blandit posuere gravida, ipsum enim iaculis arcu, in elementum diam felis a dui. Phasellus sollicitudin
pellentesque elit sed tincidunt. Quisque sit amet enim tortor. Integer porta ipsum eu tristique bibendum. Mauris finibus urna consectetur semper viverra. Suspendisse venenatis bibendum lectus at scelerisque. Duis semper id quam id tempor. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Proin scelerisque quam nunc, ac venenatis tortor aliquam ac. Nullam venenatis, nisl vitae imperdiet mollis, felis ante pretium augue, vitae semper justo tortor at augue. Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Duis ac velit sit amet lectus ultricies luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam sed maximus nisl. Suspendisse porttitor neque at finibus suscipit.
Praesent commodo erat pulvinar sollicitudin egestas. In suscipit, elit quis mattis aliquam, arcu libero laoreet sapien, in pellentesque odio metus in dolor. Ut congue mollis odio, non venenatis purus rhoncus ut. Sed mi leo, dictum ut quam ut,
varius egestas nibh. Nam vel lorem neque. Nunc id hendrerit nisi. Vivamus finibus purus dui, eu molestie ex tincidunt eu. Proin vulputate dui ut justo elementum, in semper diam aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla varius, ex sed mollis placerat, nunc neque semper nibh, eget imperdiet massa libero ac tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sit amet odio feugiat, iaculis odio a, malesuada
neque. Sed non nisi auctor, malesuada tortor vel, ultricies nisi. Aenean vehicula lorem neque, non finibus diam congue ac. Pellentesque euismod erat ex, vitae tempor nunc congue vel. Etiam viverra sapien sed massa viverra, ac tincidunt odio
condimentum. Nullam nibh nisi, tincidunt vitae volutpat vitae, eleifend non ligula. Nullam in nibh elementum, consequat metus at, volutpat libero. Suspendisse rhoncus eu libero in porttitor. Nulla vel nibh vel purus viverra posuere eu placerat
eros. Integer luctus mollis sem, at commodo magna laoreet eget. Nam cursus augue quis fringilla lobortis. Quisque tincidunt metus ut tellus feugiat tincidunt. Maecenas convallis metus a lectus maximus, ut egestas velit eleifend. Cras eros lectus,
molestie vel aliquam eu, suscipit eget lacus. Ut sapien augue, placerat nec sollicitudin vel, congue nec urna. Nam dignissim dapibus lacus, a efficitur turpis pulvinar in. Phasellus condimentum, turpis nec molestie venenatis, leo lorem auctor
sem, nec interdum lectus elit a dui. Sed varius, velit ac placerat auctor, velit ligula convallis lacus, eget pellentesque tellus libero in turpis. Donec tristique orci mi, et tristique lacus finibus eget. Duis ultricies, arcu eget pretium accumsan,
sem dui ultrices turpis, vel semper metus est et lorem. Nullam sollicitudin ultrices elementum. Donec non porta velit. Cras et mattis ligula. Quisque risus nunc, vehicula consectetur mi nec, euismod fringilla ipsum. Aliquam ut nibh viverra,
dignissim magna vel, aliquam arcu. Sed posuere, eros eu interdum gravida, arcu mi porttitor dolor, et ultricies enim lacus in metus. Aliquam erat volutpat. Morbi imperdiet ullamcorper enim eget placerat. Nam at semper arcu, eu commodo orci.
Nulla tincidunt pharetra ligula varius tincidunt. Praesent feugiat, quam facilisis ornare lacinia, tellus magna laoreet est, nec imperdiet dolor metus vitae justo. Etiam a nisl erat. Donec consectetur, tellus vel varius volutpat, nibh justo
dictum neque, a mattis nulla elit a quam. Aliquam sed erat eget ante elementum congue. In pharetra, justo blandit posuere gravida, ipsum enim iaculis arcu, in elementum diam felis a dui. Phasellus sollicitudin pellentesque elit sed tincidunt.
Quisque sit amet enim tortor. Integer porta ipsum eu tristique bibendum. Mauris finibus urna consectetur semper viverra. Suspendisse venenatis bibendum lectus at scelerisque. Duis semper id quam id tempor. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin scelerisque quam nunc, ac venenatis tortor aliquam ac. Nullam venenatis, nisl vitae imperdiet mollis, felis ante pretium augue, vitae semper justo tortor at augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis ac velit sit amet lectus ultricies luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam sed maximus nisl. Suspendisse porttitor neque at finibus suscipit. Praesent commodo erat pulvinar
sollicitudin egestas. In suscipit, elit quis mattis aliquam, arcu libero laoreet sapien, in pellentesque odio metus in dolor. Ut congue mollis odio, non venenatis purus rhoncus ut. Sed mi leo, dictum ut quam ut, varius egestas nibh. Nam vel
lorem neque. Nunc id hendrerit nisi. Vivamus finibus purus dui, eu molestie ex tincidunt eu. Proin vulputate dui ut justo elementum, in semper diam aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius, ex sed mollis
placerat, nunc neque semper nibh, eget imperdiet massa libero ac tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sit amet odio feugiat, iaculis odio a, malesuada neque. Sed non nisi auctor,
malesuada tortor vel, ultricies nisi. Aenean vehicula lorem neque, non finibus diam congue ac. Pellentesque euismod erat ex, vitae tempor nunc congue vel. Etiam viverra sapien sed massa viverra, ac tincidunt odio condimentum. Nullam nibh nisi,
tincidunt vitae volutpat vitae, eleifend non ligula. Nullam in nibh elementum, consequat metus at, volutpat libero. Suspendisse rhoncus eu libero in porttitor. Nulla vel nibh vel purus viverra posuere eu placerat eros. Integer luctus mollis
sem, at commodo magna laoreet eget. Nam cursus augue quis fringilla lobortis. Quisque tincidunt metus ut tellus feugiat tincidunt. Maecenas convallis metus a lectus maximus, ut egestas velit eleifend. Cras eros lectus, molestie vel aliquam eu,
suscipit eget lacus. Ut sapien augue, placerat nec sollicitudin vel, congue nec urna. Nam dignissim dapibus lacus, a efficitur turpis pulvinar in. Phasellus condimentum, turpis nec molestie venenatis, leo lorem auctor sem, nec interdum lectus
elit a dui. Sed varius, velit ac placerat auctor, velit ligula convallis lacus, eget pellentesque tellus libero in turpis. Donec tristique orci mi, et tristique lacus finibus eget. Duis ultricies, arcu eget pretium accumsan, sem dui ultrices
turpis, vel semper metus est et lorem. Nullam sollicitudin ultrices elementum. Donec non porta velit. Cras et mattis ligula. Quisque risus nunc, vehicula consectetur mi nec, euismod fringilla ipsum. Aliquam ut nibh viverra, dignissim magna vel,
aliquam arcu. Sed posuere, eros eu interdum gravida, arcu mi porttitor dolor, et ultricies enim lacus in metus. Aliquam erat volutpat. Morbi imperdiet ullamcorper enim eget placerat. Nam at semper arcu, eu commodo orci. Nulla tincidunt pharetra
ligula varius tincidunt. Praesent feugiat, quam facilisis ornare lacinia, tellus magna laoreet est, nec imperdiet dolor metus vitae justo. Etiam a nisl erat. Donec consectetur, tellus vel varius volutpat, nibh justo dictum neque, a mattis nulla
elit a quam. Aliquam sed erat eget ante elementum congue. In pharetra, justo blandit posuere gravida, ipsum enim iaculis arcu, in elementum diam felis a dui. Phasellus sollicitudin pellentesque elit sed tincidunt. Quisque sit amet enim tortor.
Integer porta ipsum eu tristique bibendum. Mauris finibus urna consectetur semper viverra. Suspendisse venenatis bibendum lectus at scelerisque. Duis semper id quam id tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin scelerisque
quam nunc, ac venenatis tortor aliquam ac. Nullam venenatis, nisl vitae imperdiet mollis, felis ante pretium augue, vitae semper justo tortor at augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac velit sit amet lectus ultricies
luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam sed maximus nisl. Suspendisse porttitor neque at finibus suscipit. Praesent commodo erat pulvinar sollicitudin egestas. In suscipit, elit
quis mattis aliquam, arcu libero laoreet sapien, in pellentesque odio metus in dolor. Ut congue mollis odio, non venenatis purus rhoncus ut. Sed mi leo, dictum ut quam ut, varius egestas nibh. Nam vel lorem neque. Nunc id hendrerit nisi. Vivamus
finibus purus dui, eu molestie ex tincidunt eu. Proin vulputate dui ut justo elementum, in semper diam aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius, ex sed mollis placerat, nunc neque semper nibh, eget imperdiet
massa libero ac tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sit amet odio feugiat, iaculis odio a, malesuada neque. Sed non nisi auctor, malesuada tortor vel, ultricies nisi. Aenean
vehicula lorem neque, non finibus diam congue ac. Pellentesque euismod erat ex, vitae tempor nunc congue vel. Etiam viverra sapien sed massa viverra, ac tincidunt odio condimentum. Nullam nibh nisi, tincidunt vitae volutpat vitae, eleifend non
ligula. Nullam in nibh elementum, consequat metus at, volutpat libero. Suspendisse rhoncus eu libero in porttitor. Nulla vel nibh vel purus viverra posuere eu placerat eros. Integer luctus mollis sem, at commodo magna laoreet eget. Nam cursus
augue quis fringilla lobortis. Quisque tincidunt metus ut tellus feugiat tincidunt. Maecenas convallis metus a lectus maximus, ut egestas velit eleifend. Cras eros lectus, molestie vel aliquam eu, suscipit eget lacus. Ut sapien augue, placerat
nec sollicitudin vel, congue nec urna. Nam dignissim dapibus lacus, a efficitur turpis pulvinar in. Phasellus condimentum, turpis nec molestie venenatis, leo lorem auctor sem, nec interdum lectus elit a dui. Sed varius, velit ac placerat auctor,
velit ligula convallis lacus, eget pellentesque tellus libero in turpis. Donec tristique orci mi, et tristique lacus finibus eget. Duis ultricies, arcu eget pretium accumsan, sem dui ultrices turpis, vel semper metus est et lorem. Nullam sollicitudin
ultrices elementum. Donec non porta velit. Cras et mattis ligula. Quisque risus nunc, vehicula consectetur mi nec, euismod fringilla ipsum. Aliquam ut nibh viverra, dignissim magna vel, aliquam arcu. Sed posuere, eros eu interdum gravida, arcu
mi porttitor dolor, et ultricies enim lacus in metus. Aliquam erat volutpat. Morbi imperdiet ullamcorper enim eget placerat. Nam at semper arcu, eu commodo orci. Nulla tincidunt pharetra ligula varius tincidunt. Praesent feugiat, quam facilisis
ornare lacinia, tellus magna laoreet est, nec imperdiet dolor metus vitae justo. Etiam a nisl erat. Donec consectetur, tellus vel varius volutpat, nibh justo dictum neque, a mattis nulla elit a quam. Aliquam sed erat eget ante elementum congue.
In pharetra, justo blandit posuere gravida, ipsum enim iaculis arcu, in elementum diam felis a dui. Phasellus sollicitudin pellentesque elit sed tincidunt. Quisque sit amet enim tortor. Integer porta ipsum eu tristique bibendum. Mauris finibus
urna consectetur semper viverra. Suspendisse venenatis bibendum lectus at scelerisque. Duis semper id quam id tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin scelerisque quam nunc, ac venenatis tortor aliquam ac. Nullam
venenatis, nisl vitae imperdiet mollis, felis ante pretium augue, vitae semper justo tortor at augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac velit sit amet lectus ultricies luctus. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. Nullam sed maximus nisl. Suspendisse porttitor neque at finibus suscipit. Praesent commodo erat pulvinar sollicitudin egestas. In suscipit, elit quis mattis aliquam, arcu libero laoreet sapien,
in pellentesque odio metus in dolor. Ut congue mollis odio, non venenatis purus rhoncus ut. Sed mi leo, dictum ut quam ut, varius egestas nibh. Nam vel lorem neque. Nunc id hendrerit nisi. Vivamus finibus purus dui, eu molestie ex tincidunt
eu. Proin vulputate dui ut justo elementum, in semper diam aliquam.
</div>
</div>
</div>
</div>
</div>
尝试使用 WebKit 前缀作为您的头寸声明，如下所示：
position: -webkit-sticky; // add this.
position: sticky; // keep this.
根据 Can I Use 的说法，Safari 仅支持带有前缀的位置粘性。 https://caniuse.com/#search=sticky
职位：
- 已修复 它超出了文档其余部分的流程。
- sticky 像其他任何东西一样滚动，直到到达您设置的偏移量。在那一点上，它就像是固定的一样。
完美范例by Kevin Powell https://codepen.io/kevinpowell/pen/eXwdwq
对于你的情况，我认为你想要的是将 .sticky-header 设置为 fixed
并添加 padding-top: 100px 到 .container
除此之外，我注意到 flex: 1 与 max-height 的组合对于粘性效果不佳，试试
.wrapper {
height: 500px;
background-color: rgb(230, 230, 230);
padding: 10px;
}
.container {
height: 100%;
overflow: auto;
position: relative;
}
.sticky-header {
background-color: rgb(130, 130, 0);
background: red;
position: sticky;
top: 0;
display: flex;
justify-content: center;
align-items: center;
height: 50px;
border: 2px solid rgb(0, 0, 0);
width: 100%;
}
.sub-header {
top: 50px;
}
.content {
background-color: rgb(0, 255, 0);
}
首先确保你有最新版本的 safari，然后你需要有一些浏览器的前缀（在这种特殊情况下你需要）使用 -webkit 前缀作为
position: -webkit-sticky;
position: sticky;
另外，如果这不起作用，您可以使用粘性填充
https://github.com/wilddeer/stickyfill
Position sticky 的工作原理有点复杂。它保持 "stickiness" 直到它到达其父滚动的末尾。这意味着粘性的粘性由父元素（.container）的滚动位置决定，换句话说高度。
这是您的代码的一个固定且有效的示例。
https://codepen.io/krishnasagr/pen/XWmeeqp
解决方法是将粘性元素简单地移动到 .container 元素中，这样粘性位置就会保持粘性，直到内容滚动结束。
这样做：
像这样将粘性元素移动到容器中。
.wrapper {
max-height: 500px;
background-color: rgb(230, 230, 230);
padding: 10px;
display: flex;
}
.container {
flex: 1;
min-height: 0;
overflow: auto;
position: relative;
}
.sticky-header {
background-color: rgb(130, 130, 0);
position: sticky;
top: 0;
display: flex;
justify-content: center;
align-items: center;
height: 50px;
border: 2px solid rgb(0, 0, 0);
}
.sub-header {
top: 50px;
}
.content {
background-color: rgb(0, 255, 0);
}
<div class="content">
<div class="sticky-header">
HEADER
</div>
<div class="sticky-header sub-header">
SUBHEADER
</div>
<div>This is the first line</div>
<div>Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet</div>
</div>
我正在使用 position: sticky 来创建粘性 headers，它适用于 Chrome、Firefox 等。在 Safari 上，当我开始滚动时它工作得很好，但在滚动之后再往下 headers 开始消失。好像跟内容的高度/headers的高度有关系。当内容较少时，它也适用于 Safari。
有人可以向我解释 Safari 中发生了什么以及如何解决这个问题吗？
.wrapper {
max-height: 500px;
background-color: rgb(230, 230, 230);
padding: 10px;
display: flex;
}
.container {
flex: 1;
min-height: 0;
overflow: auto;
position: relative;
}
.sticky-header {
background-color: rgb(130, 130, 0);
position: sticky;
top: 0;
display: flex;
justify-content: center;
align-items: center;
height: 50px;
border: 2px solid rgb(0, 0, 0);
}
.sub-header {
top: 50px;
}
.content {
background-color: rgb(0, 255, 0);
}
<div class="wrapper">
<div class="container">
<div class="sticky-header">
HEADER
</div>
<div class="sticky-header sub-header">
SUBHEADER
</div>
<div class="body">
<div class="content">
<div>This is the first line</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius, ex sed mollis placerat, nunc neque semper nibh, eget imperdiet massa libero ac tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Sed sit amet odio feugiat, iaculis odio a, malesuada neque. Sed non nisi auctor, malesuada tortor vel, ultricies nisi. Aenean vehicula lorem neque, non finibus diam congue ac. Pellentesque euismod erat ex, vitae tempor nunc congue vel. Etiam
viverra sapien sed massa viverra, ac tincidunt odio condimentum. Nullam nibh nisi, tincidunt vitae volutpat vitae, eleifend non ligula. Nullam in nibh elementum, consequat metus at, volutpat libero. Suspendisse rhoncus eu libero in porttitor.
Nulla vel nibh vel purus viverra posuere eu placerat eros. Integer luctus mollis sem, at commodo magna laoreet eget. Nam cursus augue quis fringilla lobortis. Quisque tincidunt metus ut tellus feugiat tincidunt. Maecenas convallis metus a lectus
maximus, ut egestas velit eleifend. Cras eros lectus, molestie vel aliquam eu, suscipit eget lacus. Ut sapien augue, placerat nec sollicitudin vel, congue nec urna. Nam dignissim dapibus lacus, a efficitur turpis pulvinar in. Phasellus condimentum,
turpis nec molestie venenatis, leo lorem auctor sem, nec interdum lectus elit a dui. Sed varius, velit ac placerat auctor, velit ligula convallis lacus, eget pellentesque tellus libero in turpis. Donec tristique orci mi, et tristique lacus finibus
eget. Duis ultricies, arcu eget pretium accumsan, sem dui ultrices turpis, vel semper metus est et lorem. Nullam sollicitudin ultrices elementum. Donec non porta velit. Cras et mattis ligula. Quisque risus nunc, vehicula consectetur mi nec,
euismod fringilla ipsum. Aliquam ut nibh viverra, dignissim magna vel, aliquam arcu. Sed posuere, eros eu interdum gravida, arcu mi porttitor dolor, et ultricies enim lacus in metus. Aliquam erat volutpat. Morbi imperdiet ullamcorper enim eget
placerat. Nam at semper arcu, eu commodo orci. Nulla tincidunt pharetra ligula varius tincidunt. Praesent feugiat, quam facilisis ornare lacinia, tellus magna laoreet est, nec imperdiet dolor metus vitae justo. Etiam a nisl erat. Donec consectetur,
tellus vel varius volutpat, nibh justo dictum neque, a mattis nulla elit a quam. Aliquam sed erat eget ante elementum congue. In pharetra, justo blandit posuere gravida, ipsum enim iaculis arcu, in elementum diam felis a dui. Phasellus sollicitudin
pellentesque elit sed tincidunt. Quisque sit amet enim tortor. Integer porta ipsum eu tristique bibendum. Mauris finibus urna consectetur semper viverra. Suspendisse venenatis bibendum lectus at scelerisque. Duis semper id quam id tempor. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Proin scelerisque quam nunc, ac venenatis tortor aliquam ac. Nullam venenatis, nisl vitae imperdiet mollis, felis ante pretium augue, vitae semper justo tortor at augue. Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Duis ac velit sit amet lectus ultricies luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam sed maximus nisl. Suspendisse porttitor neque at finibus suscipit.
Praesent commodo erat pulvinar sollicitudin egestas. In suscipit, elit quis mattis aliquam, arcu libero laoreet sapien, in pellentesque odio metus in dolor. Ut congue mollis odio, non venenatis purus rhoncus ut. Sed mi leo, dictum ut quam ut,
varius egestas nibh. Nam vel lorem neque. Nunc id hendrerit nisi. Vivamus finibus purus dui, eu molestie ex tincidunt eu. Proin vulputate dui ut justo elementum, in semper diam aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla varius, ex sed mollis placerat, nunc neque semper nibh, eget imperdiet massa libero ac tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sit amet odio feugiat, iaculis odio a, malesuada
neque. Sed non nisi auctor, malesuada tortor vel, ultricies nisi. Aenean vehicula lorem neque, non finibus diam congue ac. Pellentesque euismod erat ex, vitae tempor nunc congue vel. Etiam viverra sapien sed massa viverra, ac tincidunt odio
condimentum. Nullam nibh nisi, tincidunt vitae volutpat vitae, eleifend non ligula. Nullam in nibh elementum, consequat metus at, volutpat libero. Suspendisse rhoncus eu libero in porttitor. Nulla vel nibh vel purus viverra posuere eu placerat
eros. Integer luctus mollis sem, at commodo magna laoreet eget. Nam cursus augue quis fringilla lobortis. Quisque tincidunt metus ut tellus feugiat tincidunt. Maecenas convallis metus a lectus maximus, ut egestas velit eleifend. Cras eros lectus,
molestie vel aliquam eu, suscipit eget lacus. Ut sapien augue, placerat nec sollicitudin vel, congue nec urna. Nam dignissim dapibus lacus, a efficitur turpis pulvinar in. Phasellus condimentum, turpis nec molestie venenatis, leo lorem auctor
sem, nec interdum lectus elit a dui. Sed varius, velit ac placerat auctor, velit ligula convallis lacus, eget pellentesque tellus libero in turpis. Donec tristique orci mi, et tristique lacus finibus eget. Duis ultricies, arcu eget pretium accumsan,
sem dui ultrices turpis, vel semper metus est et lorem. Nullam sollicitudin ultrices elementum. Donec non porta velit. Cras et mattis ligula. Quisque risus nunc, vehicula consectetur mi nec, euismod fringilla ipsum. Aliquam ut nibh viverra,
dignissim magna vel, aliquam arcu. Sed posuere, eros eu interdum gravida, arcu mi porttitor dolor, et ultricies enim lacus in metus. Aliquam erat volutpat. Morbi imperdiet ullamcorper enim eget placerat. Nam at semper arcu, eu commodo orci.
Nulla tincidunt pharetra ligula varius tincidunt. Praesent feugiat, quam facilisis ornare lacinia, tellus magna laoreet est, nec imperdiet dolor metus vitae justo. Etiam a nisl erat. Donec consectetur, tellus vel varius volutpat, nibh justo
dictum neque, a mattis nulla elit a quam. Aliquam sed erat eget ante elementum congue. In pharetra, justo blandit posuere gravida, ipsum enim iaculis arcu, in elementum diam felis a dui. Phasellus sollicitudin pellentesque elit sed tincidunt.
Quisque sit amet enim tortor. Integer porta ipsum eu tristique bibendum. Mauris finibus urna consectetur semper viverra. Suspendisse venenatis bibendum lectus at scelerisque. Duis semper id quam id tempor. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin scelerisque quam nunc, ac venenatis tortor aliquam ac. Nullam venenatis, nisl vitae imperdiet mollis, felis ante pretium augue, vitae semper justo tortor at augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis ac velit sit amet lectus ultricies luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam sed maximus nisl. Suspendisse porttitor neque at finibus suscipit. Praesent commodo erat pulvinar
sollicitudin egestas. In suscipit, elit quis mattis aliquam, arcu libero laoreet sapien, in pellentesque odio metus in dolor. Ut congue mollis odio, non venenatis purus rhoncus ut. Sed mi leo, dictum ut quam ut, varius egestas nibh. Nam vel
lorem neque. Nunc id hendrerit nisi. Vivamus finibus purus dui, eu molestie ex tincidunt eu. Proin vulputate dui ut justo elementum, in semper diam aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius, ex sed mollis
placerat, nunc neque semper nibh, eget imperdiet massa libero ac tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sit amet odio feugiat, iaculis odio a, malesuada neque. Sed non nisi auctor,
malesuada tortor vel, ultricies nisi. Aenean vehicula lorem neque, non finibus diam congue ac. Pellentesque euismod erat ex, vitae tempor nunc congue vel. Etiam viverra sapien sed massa viverra, ac tincidunt odio condimentum. Nullam nibh nisi,
tincidunt vitae volutpat vitae, eleifend non ligula. Nullam in nibh elementum, consequat metus at, volutpat libero. Suspendisse rhoncus eu libero in porttitor. Nulla vel nibh vel purus viverra posuere eu placerat eros. Integer luctus mollis
sem, at commodo magna laoreet eget. Nam cursus augue quis fringilla lobortis. Quisque tincidunt metus ut tellus feugiat tincidunt. Maecenas convallis metus a lectus maximus, ut egestas velit eleifend. Cras eros lectus, molestie vel aliquam eu,
suscipit eget lacus. Ut sapien augue, placerat nec sollicitudin vel, congue nec urna. Nam dignissim dapibus lacus, a efficitur turpis pulvinar in. Phasellus condimentum, turpis nec molestie venenatis, leo lorem auctor sem, nec interdum lectus
elit a dui. Sed varius, velit ac placerat auctor, velit ligula convallis lacus, eget pellentesque tellus libero in turpis. Donec tristique orci mi, et tristique lacus finibus eget. Duis ultricies, arcu eget pretium accumsan, sem dui ultrices
turpis, vel semper metus est et lorem. Nullam sollicitudin ultrices elementum. Donec non porta velit. Cras et mattis ligula. Quisque risus nunc, vehicula consectetur mi nec, euismod fringilla ipsum. Aliquam ut nibh viverra, dignissim magna vel,
aliquam arcu. Sed posuere, eros eu interdum gravida, arcu mi porttitor dolor, et ultricies enim lacus in metus. Aliquam erat volutpat. Morbi imperdiet ullamcorper enim eget placerat. Nam at semper arcu, eu commodo orci. Nulla tincidunt pharetra
ligula varius tincidunt. Praesent feugiat, quam facilisis ornare lacinia, tellus magna laoreet est, nec imperdiet dolor metus vitae justo. Etiam a nisl erat. Donec consectetur, tellus vel varius volutpat, nibh justo dictum neque, a mattis nulla
elit a quam. Aliquam sed erat eget ante elementum congue. In pharetra, justo blandit posuere gravida, ipsum enim iaculis arcu, in elementum diam felis a dui. Phasellus sollicitudin pellentesque elit sed tincidunt. Quisque sit amet enim tortor.
Integer porta ipsum eu tristique bibendum. Mauris finibus urna consectetur semper viverra. Suspendisse venenatis bibendum lectus at scelerisque. Duis semper id quam id tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin scelerisque
quam nunc, ac venenatis tortor aliquam ac. Nullam venenatis, nisl vitae imperdiet mollis, felis ante pretium augue, vitae semper justo tortor at augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac velit sit amet lectus ultricies
luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam sed maximus nisl. Suspendisse porttitor neque at finibus suscipit. Praesent commodo erat pulvinar sollicitudin egestas. In suscipit, elit
quis mattis aliquam, arcu libero laoreet sapien, in pellentesque odio metus in dolor. Ut congue mollis odio, non venenatis purus rhoncus ut. Sed mi leo, dictum ut quam ut, varius egestas nibh. Nam vel lorem neque. Nunc id hendrerit nisi. Vivamus
finibus purus dui, eu molestie ex tincidunt eu. Proin vulputate dui ut justo elementum, in semper diam aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius, ex sed mollis placerat, nunc neque semper nibh, eget imperdiet
massa libero ac tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sit amet odio feugiat, iaculis odio a, malesuada neque. Sed non nisi auctor, malesuada tortor vel, ultricies nisi. Aenean
vehicula lorem neque, non finibus diam congue ac. Pellentesque euismod erat ex, vitae tempor nunc congue vel. Etiam viverra sapien sed massa viverra, ac tincidunt odio condimentum. Nullam nibh nisi, tincidunt vitae volutpat vitae, eleifend non
ligula. Nullam in nibh elementum, consequat metus at, volutpat libero. Suspendisse rhoncus eu libero in porttitor. Nulla vel nibh vel purus viverra posuere eu placerat eros. Integer luctus mollis sem, at commodo magna laoreet eget. Nam cursus
augue quis fringilla lobortis. Quisque tincidunt metus ut tellus feugiat tincidunt. Maecenas convallis metus a lectus maximus, ut egestas velit eleifend. Cras eros lectus, molestie vel aliquam eu, suscipit eget lacus. Ut sapien augue, placerat
nec sollicitudin vel, congue nec urna. Nam dignissim dapibus lacus, a efficitur turpis pulvinar in. Phasellus condimentum, turpis nec molestie venenatis, leo lorem auctor sem, nec interdum lectus elit a dui. Sed varius, velit ac placerat auctor,
velit ligula convallis lacus, eget pellentesque tellus libero in turpis. Donec tristique orci mi, et tristique lacus finibus eget. Duis ultricies, arcu eget pretium accumsan, sem dui ultrices turpis, vel semper metus est et lorem. Nullam sollicitudin
ultrices elementum. Donec non porta velit. Cras et mattis ligula. Quisque risus nunc, vehicula consectetur mi nec, euismod fringilla ipsum. Aliquam ut nibh viverra, dignissim magna vel, aliquam arcu. Sed posuere, eros eu interdum gravida, arcu
mi porttitor dolor, et ultricies enim lacus in metus. Aliquam erat volutpat. Morbi imperdiet ullamcorper enim eget placerat. Nam at semper arcu, eu commodo orci. Nulla tincidunt pharetra ligula varius tincidunt. Praesent feugiat, quam facilisis
ornare lacinia, tellus magna laoreet est, nec imperdiet dolor metus vitae justo. Etiam a nisl erat. Donec consectetur, tellus vel varius volutpat, nibh justo dictum neque, a mattis nulla elit a quam. Aliquam sed erat eget ante elementum congue.
In pharetra, justo blandit posuere gravida, ipsum enim iaculis arcu, in elementum diam felis a dui. Phasellus sollicitudin pellentesque elit sed tincidunt. Quisque sit amet enim tortor. Integer porta ipsum eu tristique bibendum. Mauris finibus
urna consectetur semper viverra. Suspendisse venenatis bibendum lectus at scelerisque. Duis semper id quam id tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin scelerisque quam nunc, ac venenatis tortor aliquam ac. Nullam
venenatis, nisl vitae imperdiet mollis, felis ante pretium augue, vitae semper justo tortor at augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac velit sit amet lectus ultricies luctus. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. Nullam sed maximus nisl. Suspendisse porttitor neque at finibus suscipit. Praesent commodo erat pulvinar sollicitudin egestas. In suscipit, elit quis mattis aliquam, arcu libero laoreet sapien,
in pellentesque odio metus in dolor. Ut congue mollis odio, non venenatis purus rhoncus ut. Sed mi leo, dictum ut quam ut, varius egestas nibh. Nam vel lorem neque. Nunc id hendrerit nisi. Vivamus finibus purus dui, eu molestie ex tincidunt
eu. Proin vulputate dui ut justo elementum, in semper diam aliquam.
</div>
</div>
</div>
</div>
</div>
尝试使用 WebKit 前缀作为您的头寸声明，如下所示：
position: -webkit-sticky; // add this.
position: sticky; // keep this.
根据 Can I Use 的说法，Safari 仅支持带有前缀的位置粘性。 https://caniuse.com/#search=sticky
职位：
- 已修复 它超出了文档其余部分的流程。
- sticky 像其他任何东西一样滚动，直到到达您设置的偏移量。在那一点上，它就像是固定的一样。
完美范例by Kevin Powell https://codepen.io/kevinpowell/pen/eXwdwq
对于你的情况，我认为你想要的是将 .sticky-header 设置为 fixed 并添加 padding-top: 100px 到 .container
除此之外，我注意到 flex: 1 与 max-height 的组合对于粘性效果不佳，试试
.wrapper {
height: 500px;
background-color: rgb(230, 230, 230);
padding: 10px;
}
.container {
height: 100%;
overflow: auto;
position: relative;
}
.sticky-header {
background-color: rgb(130, 130, 0);
background: red;
position: sticky;
top: 0;
display: flex;
justify-content: center;
align-items: center;
height: 50px;
border: 2px solid rgb(0, 0, 0);
width: 100%;
}
.sub-header {
top: 50px;
}
.content {
background-color: rgb(0, 255, 0);
}
首先确保你有最新版本的 safari，然后你需要有一些浏览器的前缀（在这种特殊情况下你需要）使用 -webkit 前缀作为
position: -webkit-sticky;
position: sticky;
另外，如果这不起作用，您可以使用粘性填充 https://github.com/wilddeer/stickyfill
Position sticky 的工作原理有点复杂。它保持 "stickiness" 直到它到达其父滚动的末尾。这意味着粘性的粘性由父元素（.container）的滚动位置决定，换句话说高度。
这是您的代码的一个固定且有效的示例。 https://codepen.io/krishnasagr/pen/XWmeeqp
解决方法是将粘性元素简单地移动到 .container 元素中，这样粘性位置就会保持粘性，直到内容滚动结束。
这样做： 像这样将粘性元素移动到容器中。
.wrapper {
max-height: 500px;
background-color: rgb(230, 230, 230);
padding: 10px;
display: flex;
}
.container {
flex: 1;
min-height: 0;
overflow: auto;
position: relative;
}
.sticky-header {
background-color: rgb(130, 130, 0);
position: sticky;
top: 0;
display: flex;
justify-content: center;
align-items: center;
height: 50px;
border: 2px solid rgb(0, 0, 0);
}
.sub-header {
top: 50px;
}
.content {
background-color: rgb(0, 255, 0);
}
<div class="content">
<div class="sticky-header">
HEADER
</div>
<div class="sticky-header sub-header">
SUBHEADER
</div>
<div>This is the first line</div>
<div>Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet</div>
</div>