2

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?

Community
  • 1
  • 1
bananas123
  • 417
  • 2
  • 7
  • 12
  • Hard to tell without seeing your code, but maybe `overflow: hidden` on the div where the scrolling content is. – bfavaretto Oct 29 '12 at 19:13
  • Right but that doesn't change the background of the transparent div. When you scroll the div where the scrolling content is, its background changes and it's not seamless with the div on top. – bananas123 Oct 29 '12 at 19:21
  • Try `background-attachment: fixed` if you don't want the bg to scroll (should work if it's a background image). – bfavaretto Oct 29 '12 at 19:23
  • Oh. That's a possibility I didn't consider. But I do want the bg to scroll. – bananas123 Oct 29 '12 at 19:33

1 Answers1

2

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.

Patrick Fisher
  • 7,926
  • 5
  • 35
  • 28