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

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 2

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 3

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

Answer 4

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