Sticky Hero

A sticky hero section that reveals its content on scroll.

Copy: View demo

Dependencies

All components are built upon the CodyHouse Framework.

This component includes variations. All variations share the same SCSS/JS code. They only differ in the HTML part.

How to

The Sticky Hero component is a section with a background image/video that becomes fixed and reveals its content on scroll.

This effect takes advantage of the CSS position: sticky property value applied to the media element.

The component comes with two variations that you can select using one of the sticky-hero modifier classes:

We use the IntersectionObserver API to detect when the media element becomes fixed and trigger the media/overlay element animation.

🌄Image/Video credits:

Bug Report & Feedback

Get in touch: suggest a component or report a bug.

💌 Join our newsletter

Get our monthly recap with the latest CodyHouse news