рони,
спасибо. Работает) |
Ребята, объясните пожалуйста, почему так получается что при наведении курсора на область с position:fixed и прокручивании, страница остаётся неподвижной. А при наведении курсора в любую другую область сайта при скроле всё нормально прокручивается.
|
Nlk, можно пример?
https://jsfiddle.net/uyh6exyj/ |
В коде приведённом ниже скрыт скролл страницы, это нужно оставить.
|
Nlk,
Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Извиняюсь, поправил.
<!DOCTYPE html><html lang="ru"><head><meta charset="UTF-8"><style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html, body{
min-height: 100%;
}
body{
overflow: hidden;
}
.wrap {
overflow-y: scroll;
width: calc(100% + 9px);
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.page {
height: 100vh;
width: 100%;
}
.active {
position: fixed;
top: 0;
height: 100px;
}
.page:nth-of-type(1) {background-color:#cccccc;}
.page:nth-of-type(2) {background-color:#afafaf;}
.page:nth-of-type(3) {background-color:#737373;}
.page:nth-of-type(4) {background-color:#404040;}
</style></head><body>
<section class="wrap">
<section class="page active"></section>
<section class="page"></section>
<section class="page"></section>
<section class="page"></section>
</section>
</body></html>
|
Альтернативное решение использовать position:sticky, правда его поддержка браузерами не так хороша.
|
Nlk, в какой ситуации потребовалось растягивать блок с контентом на весь экран и его потомка фиксировать сверху?
|
Nexus,
Full Page Slider, реализация может и своеобразная, но вопрос лишь в этом моменте. |
Nlk, не проще просто растянуть высоту обертки, отказавшись от её абсолютного позиционирования?
|
| Часовой пояс GMT +3, время: 02:24. |