parallax-container | A web-component for parallax | Animation library

I've a basic parallax layout which fundamentally seems to be working, but I'm struggling with the z-index of the static sections, which has caused them to scroll behind instead of in front of certain divs

HTML:

I am trying to get the feature block to show up on the page when I click the open button, but it is not doing anything. I have a sneaking suspension this has to do with the CDNs I'm importing and their position. Or this could have something to do with the order of the relevant tap target sections in my code, I'm not really sure. I followed the Materialize example of how to set this up verbatim, yet it seems like I can't quite get it right.

Question title might be a bit confusing as I'm not sure how to properly explain this.

I have a video example of the desired result: https://bcx-production-attachments-us-west-2.s3-us-west-2.amazonaws.com/99ccd694-7e7d-11ea-940f-a0369f08283c?AWSAccessKeyId=AKIAIXJK7HJ33HYQWMEQ&Expires=1587420147&Signature=zhLi2pKSDMHFWCcbtAZE7f5Gz5k%3D&response-content-disposition=inline%3B%20filename%3D%22Parallax%20Example.mp4%22%3B%20filename%2A%3DUTF-8%27%27Parallax%2520Example.mp4&response-content-type=video%2Fmp4

My understanding of parallax is that the image stays fixed while the following elements scroll 'past' it. In the video, the background image appears to be parallax as the "Transparent Section' container scrolls past it like how parallax would behave. But on the other hand, the image itself scrolls up under the header.

I've been playing around and can't seem to achieve this result. Thinking about how parallax works with background-attachment: fixed, I can't seem to wrap my brain around how I can achieve this. My Parallax'd image does not scroll up under the header but rather stays put. I've just been doing purely css on this so far, not sure if Javascript is required.

I'm looking for some insight if this is possible and if so, how abouts would I go with getting this look.

ALSO: the header stays fixed until it meets the top of the 'Transparent Section' container, then it scrolls away with the rest of the page. The parallax'd image scrolls at a slower speed. Separate details if that matters.

EDIT:

https://codepen.io/losttech/pen/wvKzYmX Here is codepen of what I have, I am unable to achieve the parallax image scrolling up into the header as in the video.

HTML:

I am still learning about angular so I might not have the best design, but anyways I get confused not being so sure where my css should be. I have src/index.html, styles.css and src/app/app.component.html, app.component.html. I am trying to customize home.component.html, no home.component.css has been implemented. On .parallax-container I am trying to show an image, but not showing as a background image.

src/styles.css