# scrollShadow

> Gives a sticky header a scroll-driven shadow, so it reads as elevated only once content has scrolled beneath it.

```ts
import { scrollShadow } from "@sdxc/ui/animations";
```

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

```ts
scrollShadow(options?: ScrollShadow.Options): CSSMixinDescriptor
```

Returns: 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

```tsx
mix={scrollShadow({ distance: "80px" })}
```

## Used with it

The events, constants and types its module publishes, each imported from `@sdxc/ui/animations` too.

### ScrollShadow.Options

Options controlling how far a sticky element's own scroll container
must scroll before its shadow fully settles in.

#### Members

| Member | Type | Description |
| --- | --- | --- |
| `distance?` | `string` | CSS length the shadow ramps in over, measured from the top of the tracked scroll container. Defaults to `"120px"`. |