How do you handle Headers?

[rabidkitten]

I have an MUI header at the top of my page. When I scroll, the problem is that the opacity doesn't reach 1 until the user scrolls the WELCOME message under the header. How do I set parallax so that it understands there is a set header height at the top of the page and to take that into consideration?

<Parallax
        opacity={[0, 1]}
        scale={[0.75, 1]}
        easing="easeIn"
        style={{ backgroundColor: 'yellow', height: '400px', width: '400px', opacity: 0 }}
  >
        <h1>WELCOME</h1>
</Parallax>

[jscottsmith]

Progress is determined relative to the viewport but there are a few ways to change this behavior. Using a target element is by far the easiest, because you can use CSS to position the target element so that it starts/stops where you want the parallax to occur. See the target element storybook example