Приветствую тех, кто прочтет.
В общем, такая задача. Мне нужно ограничить область видимости прокручиваемого блока. Вот, допустим, код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
html, body {
margin: 0;
}
section {
width: 100%;
}
#top {
position: fixed;
height: 100px;
background-color: transparent;
}
#content {
height: 1500px;
background-image: radial-gradient(green, blue);
}
</style>
</head>
<body>
<section id="top">
Text on top
</section>
<section id="content">
Content
</section>
</body>
</html>
Естественно, при прокрутке, да и в данном случае, по-умолчанию, блок контента виден под фиксированным верхним блоком. Естественно, если ставить цвет непрозрачный, то все будет ок, но мне нужно именно ограничить область видимости блока контента, чтобы он ни коем образом не был виден под шапкой, когда шапка прозрачная.
1. Пробовал химичить с
overflow-y: scroll; у контента, но все сводилось ко второму скроллбару рядом с контентом.
2. Пробовал скриптом убрать основной скроллбар и расширить на всю ширину контент, но, при использовании
overflow-y: hidden; у
body, фиксированный элемент сдвигается вправо на область ширины скроллбара, а это - "плавающий" текст в шапке (с разной шириной в зависимости от наличия или отсутствия скроллбара), да и если не расширять высоту контента, то скроллбар будет не на всю высоту браузера, а это важно...
3. Пробовал скриптом уменьшать ширину шапки на величину ширины скроллбара, но опять же высота скроллбара будет не на всю высоту браузера...
А вообще, полная задача в том, чтобы в фиксированной шапке сайта были пункты меню, при нажатии на которые появлялось зафиксированное окно с контентом, прокрутка бы работала только на контент, а остальное (body) - фиксировалось. При повторном нажатии - окно убирается, скроллинг работает на body как раньше. Задачу решу, если смогу ограничить область прокрутки, ну или сделать так, чтобы прокручиваемая область была не видна под прозрачной шапкой.
Кто-то может предложить пример или решение? Ну или мыслями поделиться хотя бы, хоть css хоть скриптами... Весь день ищу, понимаю, что похоже уже лыжи не едут, и тем не менее, решить задачу надо. Спасибо заранее всем прочитавшим.
UPD: А может как-то можно принудительно задать высоту скроллбара на весь иннер браузера?
UPD2: Вот
тут,
тут или
тут то что хочу, кроме того, что по вертикали не ограничена область прокрутки...
Простой
