-
Notifications
You must be signed in to change notification settings - Fork 156
How do you handle Headers? #269
rabidkitten
started this conversation in
General
-
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>
Beta Was this translation helpful? Give feedback.
All reactions
Replies: 1 comment
-
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
Beta Was this translation helpful? Give feedback.
All reactions
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment