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

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 transparent).
I know a lot about css, but cannot seem to figure this one out. I have tried setting overflow to hidden, but I knew it wouldn't work (and it didn't).
This is very hard to explain, so I did the best I could.
html:
<div id="header">
<div id="topmenu">Home | Find Feeds | Subscriptions</div>
</div>
<div id="container">
<div id="content">
testing
</div>
</div>
css:
#header {
margin:0 auto;
position: fixed;
width:100%;
z-index:1000;
}
#topmenu {
background-color:#0000FF;
height:24px;
filter: alpha(opacity=50);
opacity: 0.5;
}
#leftlinks {
padding: 4px;
padding-left: 10px;
float: left;
}
#rightlinks {
padding: 4px;
padding-right: 10px;
float: right;
}
#containerfixedtop {
width: 100%;
height: 20px;
}
#contentfixedtop {
margin: 0 auto;
background-color: #DAA520;
width: 960px;
height:20px;
}
#container {
position: relative;
top: 68px;
width: 100%;
height: 2000px;
overflow: auto;
}
#content {
margin: 0 auto;
background-color: #DAA520;
width: 960px;
height: 2000px;
}
Here's a screenshot of the problem:

Answer 1

Just coming to this late, but in case anyone else runs across this in the future, here's your fix.
Your CSS Code:
.wrapper {
width:100%;
position:fixed;
z-index:10;
background:inherit;
}
.bottom-wrapper {
width:100%;
padding-top:92px;
z-index:5;
overflow:auto;
}
Your HTML:
<div class="wrapper">
...your header here...
</div>
<div class="bottom-wrapper">
...your main content here...
</div>
This will provide you with a header that cleanly matches your site, and floats at the top. The main content will scroll free of the header, and disappear when it passes the header.
Your .bottom-wrapper padding-top should be the height of your header wrapper's content.
Cheers!

Answer 2

You are probably looking for z-index. It allows you to specify the vertical order of elements on the page, so an element with z-index: 10 is floating above (visually) an element with z-index: 5.
Give the content z-index: 5 and see if it works.

Answer 3

I was having a similar issue, and found a solution for my case. It should apply whether you are using a full screen background image, or a solid color (including white).
HTML
<div id="full-size-background"></div>
<div id="header">
<p>Some text that should be fixed to the top</p>
</div>
<div id="body-text">
<p>Some text that should be scrollable</p>
</div>
CSS
#full-size-background {
z-index:-1;
background-image:url(image.jpg);
background-position:fixed;
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
}
#header {
position:fixed;
background-image:url(image.jpg);
height:150px;
width:100%;
}
#body-text {
margin-top:150px;
}
This gives me the look of a full page image with a transparent fixed header and when the body content scrolls, it hides behind the header. The images appear seamless.
You could do the same thing with a solid color background, though, arguably, it would have been easier.
2 notes: the header has a set height, I have only tested in FF and Chrome.

Answer 4

Just came up with a new solution to this type of problem that I'm quite happy with.
Use clip-path on the content that needs to hide behind the transparent element. Then update the clip-path dynamically with js on window scroll.
HTML
<div id="sticky">Sticky content</div>
<div id="content">
<!-- any html inside here will hide behind #sticky -->
</div>
JS
window.addEventListener("scroll",function(){
const windowScrollTop = window.scrollTop;
const elementToHide = document.getElementById("content");
elementToHide.style.clipPath = `inset(${windowScrollTop}px 0 0 0)`;
});
Dynamic sticky content
In my case I had an element that I switched to position: sticky after scrolling past it. The #sticky content needs to be relative to the dom elements that came before it until we have scrolled far enough. Here's how I accounted for that:
HTML
<div id="otherStuff">Here's some other stuff</div>
<div id="sticky">Sticky content</div>
<div id="content">
<!-- any html inside here will hide behind #sticky -->
</div>
JS
window.addEventListener("scroll",function(){
const windowScrollTop = window.scrollTop;
const stickyElement = document.getElementById("sticky");
const elementToHide = document.getElementById("content");
const stickyElementTop = stickyElement.getBoundingClientRect().top
if(windowScrollTop >= stickyElementTop){
stickyElement.style.position = "sticky";
elementToHide.style.clipPath = `inset(${windowScrollTop - stickyElementTop}px 0 0 0)`;
}
else {
stickyElement.style.position = "relative";
elementToHide.style.clipPath = "none";
}
});

Answer 5

I fixed this problem using the background property with a color, you can use var even if you'd like to
.header{
width:100%;
position:fixed;
z-index:10;
background:blue;
/* background: var(--my-var-value); You can do this if needed*/
}

Answer 6

Does #header have a set height?
#header {position: fixed; height: 100px; }
#container {position: absolute; top: 100px; bottom: 0; overflow: auto; }
Pretty sure this wouldn't work in IE though...

Answer 7

Fix the position of the content div below the header + overflow-y the content div.

Answer 8

I have fixed background image
The header background is transparent
I don't want my content to override my transparent header
I came up with a solution scrolling the div instead the body:
<div>
<div class="header"></div>
<div class="content"></div>
</div>
.header { position: fixed; ... }
.content { position: fixed; height: calc(100% - HEADER_HEIGHT); overflow: scroll; }

Answer 9

I too faced similar issue, but solved it using a simple dirty hack
1) have a white image in images folder
2) then add this css in header style
z-index:999; // to make header above the scrolling contents
background-image : url("../images/white.png"); // to hide the scrolling content
3) It is done!!

Answer 10

The header's z-index is set to 1000, so the z-index of the container would have to be 1001 if you want it to stack on top of the header. https://codepen.io/richiegarcia/pen/OJypzrL
#header {
margin:0 auto;
position: fixed;
width:100%;
z-index:1000;
}
#topmenu {
background-color:#0000FF;
height:24px;
filter: alpha(opacity=50);
opacity: 0.5;
}
#leftlinks {
padding: 4px;
padding-left: 10px;
float: left;
}
#rightlinks {
padding: 4px;
padding-right: 10px;
float: right;
}
#containerfixedtop {
width: 100%;
height: 20px;
}
#contentfixedtop {
margin: 0 auto;
background-color: #DAA520;
width: 960px;
height:20px;
}
#container {
position: relative;
top: 68px;
width: 100%;
height: 2000px;
overflow: auto;
z-index:1001;
}
#content {
margin: 0 auto;
background-color: #DAA520;
width: 960px;
height: 2000px;
}

Answer 11

I was having the same problem. I just used added z-index:10 to the .header in CSS.

Answer 12

I solved this problem by adding another fixed div positioned right under my header with margin-top of the size of my header.
HTML:
<div id="header">
<div id="topmenu">Home | Find Feeds | Subscriptions</div>
</div>
<div id="fixed-container">
Content...
</div>
CSS:
#fixed-container{
margin-top: header_height;
height: calc(100% - header_height);
width: 100%;
position: fixed;
overflow: auto;
}

Answer 13

I was facing the same problem, so the answer that tize gave helped me alot, I created a div right under my header and used some css(z-index, overflow and background), so the main element is scrollable and hid behind the transparent header:
HTML:
<header>
<h1>Hello World</h1>
</header>
<div class="inv-header"></div>
<main>Content Here...</main>
CSS:
header{
position:fixed;
background:rgba(255,255,255,80%);
top:0;
width:100%;
z-index:10;
}
.inv-header{
position:fixed;
top:0;
height:12.8%;
width:100%;
background:inherit;
}
main{
margin-top:5.9%;
padding-top:1%;
overflow:auto;
}