Override
Hide Header on Scroll
Copy
Override
Copied to Clipboard!
Instructions
Apply this effect to a regular frame or stack around your header component, not the component itself.
Change the line 7 movement amount to the height of your header. Your header container should be set to sticky as well.
To apply to a bottom bar, change the movement amount from negative to positive
Code Preview
Previous
Next
Terms of Use for Pro Assets
By accessing and using this Framer Override Library, you agree to the following terms:
All code snippets provided are available for your personal and professional use. This includes personal websites, client projects, paid templates only (with the use of up to 10 assets per template), and other website projects in Framer. You are strictly prohibited from sharing, redistributing, selling these code snippets, or creating derivative works for resale or distribution. Unauthorized sharing, distribution, or selling of these code snippets is a breach of these terms and may result in termination of your access to this library, along with potential legal action.