---
url: "https://vueda.dev/v3/reference/api/js/use/useStickyStack.md"
title: "use/useStickyStack"
---

# use/useStickyStack

## Overview

Shares the framework-owned sticky chrome stack between the layout-level
`StickyStackProvider` and the active routed views. The provider calls `useStickyStack()` with no
argument to establish and read the context (provider role); a view (usually via the `StickyChrome`
component) calls `useStickyStack(registration)` to register a bar into a zone and receive the
element to teleport its chrome into (view role). This mirrors `usePageTitle`: the provider owns
where the chrome lives and how the stack lays out, while the view owns the chrome's content.

Two zones exist: `top` (bars pinned to the top of the scroll viewport) and `bottom` (pinned to the
bottom). Within a zone the bars form an ordered stack (by `order`); each is an independent sticky
element with its own reveal behavior, so the title can stay pinned while a filter toolbar hides on
scroll-down and a form-action bar reveals on idle. Registrations coexist (no winner) and the
provider lays them out; route transitions briefly show both the leaving and entering views' bars,
which is fine since they simply stack until the leaving view unmounts and cleans up.

## Methods

- [useStickyStack](/v3/reference/api/js/use/useStickyStack/functions/useStickyStack.md) - Establish the sticky-stack context (provider role).

## Types

### [StickyStackContext](/v3/reference/api/js/use/useStickyStack/types/StickyStackContext.md)

### [StickyStackEntry](/v3/reference/api/js/use/useStickyStack/types/StickyStackEntry.md)

### [StickyStackRegistration](/v3/reference/api/js/use/useStickyStack/types/StickyStackRegistration.md)

### [StickyReveal](/v3/reference/api/js/use/useStickyStack/types/StickyReveal.md)

`StickyReveal = MaybeRefOrGetter`

### [StickyZoneName](/v3/reference/api/js/use/useStickyStack/types/StickyZoneName.md)

`StickyZoneName = "top" | "bottom"`

## Source

`client/lib/use/useStickyStack.js:1`