fun-header-controller
Component that switches content depending on the scroll position, for creating dynamic page headers.
Use together with the fun-fixed-header to create a dynamic page header that switches appearance and component depending on scroll state. A larger, inline header is switched to a smaller fixed header when the user scrolls, keeping the header and key actions in view at all times.
Sroll in our example pages to see how we recommend implementing the fun-header-controller.
Scroll in this box to see the component in action.
The examples below do not work as you’d expect as they are embedded in this page; see above for a proper working example.
Examples
Specifications
Properties
| Property | Attribute | Required | Description | Type | Default |
|---|---|---|---|---|---|
| breakpoint | breakpoint | false | The Y scroll value to switch content on | number | 100 |
Slots
| Name | Description |
|---|---|
| default | the content to be shown when scroll is less than breakpoint |
| scrolled | the content to be shown when scroll is more than breakpoint |
Dependencies
This documentation page generated from the source at fun-header-controller.tsx
