Hide scrollable content behind transparent fixed position divs when scrolling the page?

Question

I have a div called header that is set up with a fixed position. The problem is when I scroll the page the content of the page shows up behind the header (the header is tran

Answer 1

1. I have fixed background image
2. The header background is transparent
3. I don't want my content to override my transparent header

I came up with a solution scrolling the div instead the body:

    

    




.header { position: fixed; ... }
.content { position: fixed; height: calc(100% - HEADER_HEIGHT); overflow: scroll; }