Есть ли возможность скрыть элементы, которые находятся за объектом?

13 апреля 2021, 07:50

У меня есть header прозрачный. Когда я прокручиваяю страницу я хочу скрыть элементы, которые находятся за header.

Я могу отслеживать положение элементов.

   out(window.addEventListener('scroll', async (event)=>{
    var scrolled = window.pageYOffset || document.documentElement.scrollTop;
    var centerX = document.documentElement.clientWidth / 2*0.7;
    var centerY = document.documentElement.clientHeight * 0.65;
    var elem = document.elementFromPoint(centerX, centerY);
    console.log(elem.shadowRoot.elementFromPoint(centerX, centerY))
    console.log(elem, centerX,centerY,  scrolled)
    }, false))

но это далеко не идеальный вариант. Есть ли css свойство похожее на overflow: hidden; только обратное, что бы скрывались элементы, которые находятся за элементом ?

Answer 1

Вы не поверите, но наиболее правильным решением будет задать header'у фоновый цвет.

Если вам нужно, чтобы под хедером был виден рисунок, но не видны остальные элементы - придется подумать. Например, наложить слоями (начиная снизу):1) контент с кнопками и баннером, 2) непрозрачный блок-заглушку, 3) блок с таким же баннером и без прочего, 4) заголовок.

Заголовок и заглушка остаются на месте, остальное ездит при скроллинге. Блок № 3 получается НАД заглушкой, а контент - ПОД. Визуально будет так ,что кнопки пропадают, а картинка - нет.

П.С. "ярмАрка".

П.П.С. А свойства, вами описанного, нет.