How to hide content that is scrolled under a transparent div?

You have two divs, one over the other, and the one on top is transparent. However, when you scroll you want the div on the bottom to hide as it goes under the first transparent div.

You don't want the second div's display: to change to none; as soon as it goes under the first div. You just want the part that is under to be hidden.

I've googled extensively for an answer:

1) Hide Scrolling Content Under Transparent Header

2) Scrollable Content Behind Transparent Fixed Position Divs When Scrolling The Page

3) Scrolling Body Underneath a Transparent Header Div

4) Transparent Static Header Would Like to Not End Up With Text Showing Under The Header When Scrolling

5) Hide Scrolling Content Under Fixed Transparent Header Scroll Background

#1-4 answer make the div on top background: inherit or background-image: url('background_image.jpg)'. The problem with this for me is my background is a photograph, i.e. as you scroll down what you see is different, as opposed to a colour or a pattern. The "background" of the transparent div needs to change as the real background changes.

#5 offers a solution to this using JQuery however there are horrible, horrible issues with scroll lag in browsers not Firefox.

Folks, how do I do it?

Answers:

Answer

This cannot be done without JavaScript. For the content to not show through a transparent layer, it must not be rendered at all — you would need to use overflow:hidden. The problem is that the edge of the content cannot be fixed if the content scrolls with the page. An element can be positioned relative to the viewport or relative to the page, but not both at the same time.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.