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 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:

Polivy

Could you get a screenshot of the problem? – Marou

could you add the css and html? – Aluino

@Polivy : Did you find any final solution ? I have similar issue – Numeral

Have you tried disabling user events on the transparent background. – Gowan

Please see my solution in this article: The Solution – Allayne

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!

Cajeput

This does not address his question regarding hiding it for transparent wrappers / divs, – Thimerosal

I'm having similar issues and tried to put this in but I was still getting the same result...The top is still transparent – Impetus

The header is supposed to be transparent, not the same background as the parent – Babar

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.

Tizzy

This would only be true if I set a background (whether a color or solid image) for the header div. My header div is transparent. The z-index of my header div is set to 1000. The scrollable content still shows up behind the header when I scroll the page. – Polivy

Make the z-index of the content higher than that of the header. Can you post a screenshot of your problem? I'm not quite seeing it. – Tizzy

How do I upload am image? I do not see an option for that. – Polivy

Hotlink to it. You don't have enough reputation yet to post images. – Tizzy

I wasn't sure if I could upload to stackoverflow, so I just uploaded it to my server for the time being. craiggodfrey.com/screenshotproblem.jpg – Polivy

This really works, you have to set the z-index of the header higher than that of the content. – Koerlin

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.

Cribbs

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";
  }
});

Ratcliff

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*/
}

Lunula

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...

Clear

It doesn't have a set height, but I tried a set height and still the same thing (probably not why you were asking though). IE I don't care if it works. I'm not supporting it (maybe IE 9 and 10). – Polivy

@jsbin.com/omulis - the effect I am looking for is that the scrolled content doesn't display behind the header. Right now it (the orange part) shows up behind the header. The purple part of the image is the result of orange mixing with blue. The header is a transparent blue. The orange part is the content. – Polivy

That's weird.On my Firefox/Safari/Chrome, #container isn't showing up behind #header when scrolling. – Clear

That is interesting. Have you set a background for the body? That is one thing I left out of the css. Also, is the header you're using (based on my html) transparent? – Polivy

jsbin.com/ibovoq -- I've implemented this method into your markup (heavily edited). Background color only on #top-menu (#0000FF, semi-transparent) and #content (#DAA520). – Clear

I am an idiot qwer0o. You posted jsbin.com/omulis as a link and for some reason I thought it was your username. Yes. This is the effect I am looking for as long as the content does not show up if the header is transparent. – Polivy

This doesn't work because of the transparency of the header. I am going to look into scrollable div using jquery. – Polivy

Answer 7

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

Handley

Answer 8

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:

<div>
    <div class="header"></div>
    <div class="content"></div>
</div>


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

Whitnell

With this technique, Firefox (65, 66) shows scrollbars (even an unnecessary X scrollbar) but they don't work to scroll. – Pissarro

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!!

Ciera

Works just as well with a simple background: background-color: #fff; – Suspicious

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;
}

Suspicious

Answer 11

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

Wadmal

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;
}

Hester

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;
}

Concordia