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-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?
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.
©2020 All rights reserved.