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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как скрыть контент под фиксированным полупрозрачным header'ом при прокрутке, чтобы был виден фон body?

Спасибо за совет. Первый вариант я думаю сделаю, просто хотелось что-то универсальное