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

Question

[mrRawzes]

Cуть проблемы: как сделать так, чтобы при прокрутке страницы не было видно контента, заходящего под хеадер, но была видна фоновая картинка для body?

1. На странице в качестве фона body установлена картинка, на весь экран
2. Cверху прилеплена шапка страницы: у нее указан фоновой цвет (с прозрачностью), так, чтобы был виден фон body
3. При прокрутке, блоки контента, видны внутри хеадера...
Примерно вот так: https://jsfiddle.net/m5v2y5mg/
Нужно, чтобы контент исчезал, как только он заходит за шапку. Как это реализовать?)

Answer 1

[Андрей Tantalid]

Вижу два варианта как сделать.
1. В шапке поставить как фон картинку, что и на body и растянуть как нужно. Так она перекроет контент, что снизу.
2. Сделать скролл не на body (ему overflow: hidden), а на вложенный элемент который начинается после шапки overflow: auto и высоту. Пример: https://jsfiddle.net/m5v2y5mg/1/

Comments

[mrRawzes]

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

Answer 2

[Денис]

Пример в песочнице
Добавляем в шапку элемент с абсолютным позиционированием, которому задаём тот же бекграунд. Отслеживаем скролл страницы и смещаем этот элемент соответственно.

var fakeBg = $('#fake_bg').height($(document).height());
$(window).on('scroll', function(){
	fakeBg.css('margin-top', -$(this).scrollTop());
});