# position

> Sets `position: sticky`.

```ts
import { sticky } from "@sdxc/u/layout";
```

Sets `position: sticky`.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.sticky()` | `css({ position: "sticky" })` |

## Examples

### Basic example

Use `sticky()` with an offset like `insBs(0)` to keep an element in view while its section scrolls. Scroll the list to see it:

```tsx
<div mix={[overflow("auto"), is(72), bs(64), ...]}>
	{[
		{ letter: "A", names: ["Ada Lovelace", "Alan Turing", "Anita Borg"] },
		{ letter: "B", names: ["Barbara Liskov", "Brian Kernighan", "Bjarne Stroustrup"] },
		{ letter: "D", names: ["Dennis Ritchie", "Donald Knuth", "Dorothy Vaughan"] },
		{ letter: "G", names: ["Grace Hopper", "Guido van Rossum", "Gordon Moore"] },
	].map((group) => (
		<section>
			<div mix={[sticky(), insBs(0), ...]}>{group.letter}</div>
			{group.names.map((name) => (
				<div mix={[p(3, 4)]}>{name}</div>
			))}
		</section>
	))}
</div>
```

### Sticking to the bottom

Pair `sticky()` with `insBe(0)` to hold an element to the bottom of its scroller instead. Scroll the terms to see it:

```tsx
<div mix={[overflow("auto"), is(72), bs(56), ...]}>
	{Array.from({ length: 8 }, (_, index) => (
		<p mix={[p(2, 4), ...]}>Section {index + 1} of the terms of service.</p>
	))}
	<div
		mix={[
			sticky(),
			insBe(0),
			hstack({ gap: 2, justify: "end" }),
			p(3),
			bg(),
			border({ color: "neutral.border", width: 1, style: "solid" }),
		]}
	>
		<button type="button" mix={[...]}>
			Decline
		</button>
		<button type="button" mix={[...]}>
			Accept
		</button>
	</div>
</div>
```

## Applying on a state

Wrap the call in a state utility to scope it to one selector.

```ts
u.hover(u.sticky())
```

## Responsive design

Wrap the call in a container query to scope it to one width.

```ts
u.at("md", u.sticky())
```

## Signature

```ts
u.sticky()
```