Edit Position: Sticky

Name

Also known as (comma separated)

Brief definition Sticks relative to scroll container.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "topOffset", "type": "number", "label": "top offset", "default": 0, "min": 0, "max": 40, "step": 4 }, { "id": "headerColor", "type": "color", "label": "Header colour", "default": "#E8A020", "presets": [ "#E8A020", "#F5C2E0", "#A8E6C1" ] }, { "id": "containerHeight", "type": "number", "label": "Scroll area height", "default": 140, "min": 100, "max": 220, "step": 20 }, { "id": "label", "type": "text", "label": "Header text", "default": "Section header" } ]

Templates (JSON object keyed by format) { "html": "<div class=\"ps-wrap\" role=\"img\" aria-label=\"A scrollable list with a sticky header; scroll the list below and the header stays pinned once it reaches its top offset\">\n <div class=\"ps-scroll\" style=\"height:{{containerHeight}}px;\">\n <div class=\"ps-header\" style=\"top:{{topOffset}}px;background:{{headerColor}};\">{{label}}</div>\n <div class=\"ps-row\">Row one</div>\n <div class=\"ps-row\">Row two</div>\n <div class=\"ps-row\">Row three</div>\n <div class=\"ps-row\">Row four</div>\n <div class=\"ps-row\">Row five</div>\n <div class=\"ps-row\">Row six</div>\n <div class=\"ps-row\">Row seven</div>\n </div>\n <p class=\"ps-caption\">position: sticky; top: {{topOffset}}px &mdash; scroll the list to see the header lock in place</p>\n</div>\n<style>\n.ps-wrap { font: 13px/1.4 system-ui, sans-serif; color: #241430; width: 300px; }\n.ps-scroll { overflow: auto; border: 1.5px solid #24143055; border-radius: 8px; background: #FAF7F2; }\n.ps-header { position: sticky; padding: 8px 12px; font-weight: 700; font-size: 12px; color: #241430; }\n.ps-row { padding: 14px 12px; border-top: 1px solid #24143022; font-size: 12px; }\n.ps-caption { margin: 10px 0 0; font-size: 12px; color: #241430cc; }\n</style>", "tailwind": "<div class=\"font-sans text-[#241430] w-[300px]\" role=\"img\" aria-label=\"A scrollable list with a sticky header; scroll the list below and the header stays pinned once it reaches its top offset\">\n <div class=\"overflow-auto border-[1.5px] border-[#24143055] rounded-lg bg-[#FAF7F2]\" style=\"height:{{containerHeight}}px;\">\n <div class=\"sticky px-3 py-2 font-bold text-xs\" style=\"top:{{topOffset}}px;background:{{headerColor}};\">{{label}}</div>\n <div class=\"px-3 py-3.5 border-t border-[#24143022] text-xs\">Row one</div>\n <div class=\"px-3 py-3.5 border-t border-[#24143022] text-xs\">Row two</div>\n <div class=\"px-3 py-3.5 border-t border-[#24143022] text-xs\">Row three</div>\n <div class=\"px-3 py-3.5 border-t border-[#24143022] text-xs\">Row four</div>\n <div class=\"px-3 py-3.5 border-t border-[#24143022] text-xs\">Row five</div>\n <div class=\"px-3 py-3.5 border-t border-[#24143022] text-xs\">Row six</div>\n <div class=\"px-3 py-3.5 border-t border-[#24143022] text-xs\">Row seven</div>\n </div>\n <p class=\"mt-2.5 text-xs text-[#241430]/80\">position: sticky; top: {{topOffset}}px &mdash; scroll the list to see the header lock in place</p>\n</div>", "react": "export function PositionSticky({\n topOffset = {{topOffset}},\n headerColor = \"{{headerColor}}\",\n containerHeight = {{containerHeight}},\n label = \"{{label}}\",\n}) {\n const row = { padding: \"14px 12px\", borderTop: \"1px solid #24143022\", fontSize: 12 };\n return (\n <div style={{ font: \"13px/1.4 system-ui, sans-serif\", color: \"#241430\", width: 300 }}\n role=\"img\" aria-label=\"A scrollable list with a sticky header; scroll the list below and the header stays pinned once it reaches its top offset\">\n <div style={{ height: containerHeight, overflow: \"auto\", border: \"1.5px solid #24143055\", borderRadius: 8, background: \"#FAF7F2\" }}>\n <div style={{ position: \"sticky\", top: topOffset, background: headerColor, padding: \"8px 12px\", fontWeight: 700, fontSize: 12, color: \"#241430\" }}>\n {label}\n </div>\n <div style={row}>Row one</div><div style={row}>Row two</div><div style={row}>Row three</div>\n <div style={row}>Row four</div><div style={row}>Row five</div><div style={row}>Row six</div><div style={row}>Row seven</div>\n </div>\n <p style={{ marginTop: 10, fontSize: 12, color: \"#241430cc\" }}>\n position: sticky; top: {topOffset}px &mdash; scroll the list to see the header lock in place\n </p>\n </div>\n );\n}" }