Я использую position: sticky для создания закрепленных заголовков, который отлично работает для Chrome, Firefox, et c. В Safari, когда я начинаю прокручивать, все работает нормально, но после прокрутки вниз заголовки начинают исчезать. Кажется, это как-то связано с высотой содержимого / высотой заголовков. Когда контента меньше, он отлично работает и в 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>
См. Также: https://codepen.io/geertp/pen/yLYYZqM