[ @sdxc/u/layout ]

position

Sets position: sticky.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

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

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:

Ada Lovelace

Alan Turing

Anita Borg

Barbara Liskov

Brian Kernighan

Bjarne Stroustrup

Dennis Ritchie

Donald Knuth

Dorothy Vaughan

Grace Hopper

Guido van Rossum

Gordon Moore

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

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

Section 1 of the terms of service.

Section 2 of the terms of service.

Section 3 of the terms of service.

Section 4 of the terms of service.

Section 5 of the terms of service.

Section 6 of the terms of service.

Section 7 of the terms of service.

Section 8 of the terms of service.

<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.

u.hover(u.sticky())

Responsive design

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

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

Signature

u.sticky()