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

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

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

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

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

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

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