How can I make fixed elements visible ONLY when their parent elements are visible?

Question

The site I'm working on has several div sections each the width and height of the viewport. They are stacked vertically, each with relative positioning (See Codepen). Inside each element is a fixed-position h1. I'd like for the fixed h1 in each element to remain visible only when its respective parent is visible.

I've already tried a number of z-index experiments with no success. Any ideas on what to try next?

Answer 1

Since a fixed position element is located in the viewport and not the DOM. Meaning you would need to manipulate the HTML tag making what you would like to do pretty much impossible.

Two options though, first being too change position to absolute (with the adjustments to position being based off closet parent with position of relative, absolute, fixed or the DOM root) and hide the appropriate parent element.

Second option would be to simply hide and show the fixed element using your favorite JS library to respond to user interaction instead of wrapping it.