внутренний Scroll + Position:fixed - тупик
Доброго времени суток, есть такой разметка
<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> div.sidebar { background: #fff; width: 100%; } div#scrollable { overflow-y: auto; height: 200px; } div#fixed { background: #76a7dc; color: #fff; position:fixed; top:0; height:50px; width:100%; } Проблема заключается в том, что при наведении на область с фиксированным контентом скролл перестает реагировать. Есть какие-нибудь идеи как можно решить данную задачу? P.s Частично вопрос решается заменой fixed на sticky, но частично и не поддерживается старыми браузерами хотелось бы найти более универсальное решение. За ранее спасибо за ответ :) ссылка на пример: http://jsfiddle.net/8rqetnyo/ |
oleg901,
как вариант ... <!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> *{ margin: 0; padding: 0; } div.sidebar { background: #fff; width: 100%; } div#scrollable { overflow-y: auto; height: 200px; } div#fixed { background: #76a7dc; color: #fff; position:fixed; top:0; height:50px; width: calc(100% - 16px); pointer-events: none; } </style> </head> <body> <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> </body> </html> |
Круто, спасибо!
|
Цитата:
<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> Цитата:
Живые люди используют в повседневной жизни Chrome (больше всего для Android, затем для компьютера), iOS Safari, в меньшей степени Firefox и Edge, в этих браузерах всё работает нормально, а остальное используют, либо боты, либо тестировщики, либо какие-то особо малочисленные и редкие люди, которые получают оргазм от просмотра поломанного YouTube! рони, в вашем примере содержимое заезжает под область с фиксированным контентом, т. е. её не видно, а сама область с фиксированным контентом не сможет содержать элементы, на которые можно будет нажать! |
Malleys,
ок, ваш вариант лучше. |
Часовой пояс GMT +3, время: 09:20. |