|
Сообщение от oleg901
|
|
Частично вопрос решается заменой fixed на sticky
|
Ваш вопрос полностью решается при помощи
position: sticky;, это универсальное решение, которое очень хорошо поддерживается всеми браузерами (для iOS Safari липучее позиционирование работает с префиксом
position: -webkit-sticky;)
https://caniuse.com/#feat=mdn-css_pr...osition_sticky
<div class="sidebar">
<div id="scrollable">
<div id="fixed">
position:fixed
</div>
Scrolling content<br><br><br> Так уж выходит, что общий скролл страницы задается вложенным слоем и в тоже время внутри слоя со скроллом находится фиксированный слой прикреплённый к потолку.
<br><br> В итоге мы имеем, что фиксированный слой наезжает на скролл. Как этого можно избежать?<br><br><br> Так уж выходит, что общий скролл страницы задается вложенным слоем и в тоже время внутри слоя со скроллом находится фиксированный слой прикреплённый
к потолку.
<br><br> В итоге мы имеем, что фиксированный слой наезжает на скролл. Как этого можно избежать?<br><br><br> Так уж выходит, что общий скролл страницы задается вложенным слоем и в тоже время внутри слоя со скроллом находится фиксированный слой прикреплённый
к потолку.
<br><br> В итоге мы имеем, что фиксированный слой наезжает на скролл. Как этого можно избежать?<br><br><br> Так уж выходит, что общий скролл страницы задается вложенным слоем и в тоже время внутри слоя со скроллом находится фиксированный слой прикреплённый
к потолку.
<br><br> В итоге мы имеем, что фиксированный слой наезжает на скролл. Как этого можно избежать?
</div>
</div>
<style>
.sidebar {
background: #fff;
width: 100%;
border: 1px solid red;
}
#scrollable {
overflow-y: auto;
height: 200px;
}
#fixed {
background: #76a7dc;
color: #fff;
position: -webkit-sticky;
position: sticky;
top: 0;
height: 50px;
width: 100%;
}
::-webkit-scrollbar {
width: 1em;
background: #eee;
}
::-webkit-scrollbar-thumb {
background: #ccc;
border: 0.2em solid #eee;
border-radius: 1em;
}
</style>
|
Сообщение от oleg901
|
|
не поддерживается старыми браузерами
|
Данный пример не ломается в старых браузерах, никто из живых людей не сидит в интернете в старых браузерах, поскольку происходит автоматическое обновление, а если кто-то и умудрился что-то запустить в старом браузере, то популярные сайты вам скажут об этом и посоветуют скачать новый браузер без проблем.
Живые люди используют в повседневной жизни Chrome (больше всего для Android, затем для компьютера), iOS Safari, в меньшей степени Firefox и Edge, в этих браузерах всё работает нормально, а
остальное используют, либо боты, либо тестировщики, либо какие-то особо малочисленные и редкие люди, которые получают оргазм от просмотра поломанного YouTube!
рони, в вашем примере содержимое заезжает под область с фиксированным контентом, т. е. её не видно, а сама область с фиксированным контентом не сможет содержать элементы, на которые можно будет нажать!
