[ @sdxc/ui/animations ]
scrollShadow
Gives a sticky header a scroll-driven shadow, so it reads as elevated only once content has scrolled beneath it.
import { scrollShadow } from "@sdxc/ui/animations";Usage
Gives a sticky header a scroll-driven shadow, so it reads as elevated only once content has scrolled beneath it. Reduced motion pins the shadow on; engines without scroll timelines leave the header flat.
Signature
scrollShadow(options?: ScrollShadow.Options): CSSMixinDescriptorReturns a style mixin, applicable through a host element's mix prop.
Parameters
| Parameter | Type | Description |
|---|---|---|
options? | ScrollShadow.Options | Tuning for how quickly the shadow settles in. |
Examples
mix={scrollShadow({ distance: "80px" })}Used with it
The events, constants and types its module publishes, each imported from @sdxc/ui/animations too.
Interface
ScrollShadow.Options
Options controlling how far a sticky element's own scroll container must scroll before its shadow fully settles in.
| Member | Type | Description |
|---|---|---|
distance? | string | CSS length the shadow ramps in over, measured from the top of the tracked scroll container. Defaults to "120px". |