Как скрывать контент под полупрозрачной шапкой?

Question

[mrRawzes]

Имеется структура, примерно как на картинке:

Нужно, чтобы при скролле, контент не был виден под шапкой. Подскажите, как правильно скрыть контент?

Comments

[Механик]

Тогда в чем смысл полупрозрачной шапки? Поясните детальнее, суть задачи не до конца ясна.

[mrRawzes]

Вообще, у элемента body в качестве фона стоит изображение, это изображение отображается и у шапки (за счет полупрозрачности).

[mrRawzes]

Шапка зафиксирована, указаны для фона такие параметры:
background-color: rgba(42, 50, 130, 0.8);

Answer 1

[Павел Гоголинский]

Шапке сделать background: #fff; posizition: fixed; top: 0; left: 0; width: 100%

Comments

[mrRawzes]

У шапки есть фон свой + прозрачность, из-за которой видна картинка у фона body
background-color: rgba(42, 50, 130, 0.8);

Собственно, если убрать прозрачность, то все работает как нужно. А мне нужно, чтобы именно была прозрачность.

Вот еще примерно как у меня: https://jsfiddle.net/fdv9wneh/
Нужно, чтобы блоки скрывались, как только прокручиваются до шапки.

Answer 2

[Mauster]

А какой смысл тогда делать шапку прозрачной если всё равно вы собираетесь скрывать контент?!
Как вариант написать на jQuery небольшой скрипт который будет скрывать часть контента который находится под шапкой

Comments

[mrRawzes]

Шапка делается прозрачной, для того. чтобы была видна фоновая картинка у body - это требование заказчика, скажем так)

А можно мини-пример скрипта?

Answer 3

[Григорий]

а нельзя опустить блок с контентом вниз на высоту шапки?

Comments

[mrRawzes]

Можно, но при прокрутке, этот блок будет подниматься вверх и все равно заедет по шапку.

Answer 4

[trushka]

Задать шапке вертикальный градиент от полупрозрачного снизу до непрозрачного до определённой высоты, если я правильно понял вопрос

Comments

[mrRawzes]

Я вас тоже что-то не очень понял :) Вот примерно шаблон: https://jsfiddle.net/fdv9wneh/
Нужно, чтобы все блоки не показывались под шапкой, при скроле

[trushka]

А фон тоже прокуручивается, или фиксированный?