Skip to main
Table of Contents

HTML Sticky Element

This page focuses on general CSS sticky behavior. For production table workflows (sorting, filtering, export, larger datasets), use the HTML Table page.

  • Sticky headings keep content hierarchy visible as users scroll.
  • A compact sticky table is included only to demonstrate sticky row/column mechanics.

See also: HTML Table (Production Patterns)

Stacked Sticky Headings

The heading bar stack below shows how each heading level can remain visible with a controlled top offset.

The demo headings inside this render use toc-ignore so they remain semantic headings without being added to the page TOC or heading counters. See: TOC: Authoring with toc-ignore

Header 2

Scroll through this section to test sticky behavior.

Header 3

Header 3 remains stacked under Header 2.

Header 4

Header 4 keeps its own layer and offset.
Header 5
Header 5 stays visible until lower content pushes it.
Header 6
End of stacked heading demo.

Code for This Render

This render uses the shared heading sticky stylesheet and page HTML only.

<div class="example-content-render sticky-demo__panel">
  <div class="sticky-demo__stack">
    <h2 class="sticky-demo__heading sticky-demo__heading--h2">Header 2</h2>
    <div class="sticky-demo__spacer">...</div>

    <h3 class="sticky-demo__heading sticky-demo__heading--h3">Header 3</h3>
    <div class="sticky-demo__spacer">...</div>
    <!-- continue h4-h6 with cumulative top offsets -->
  </div>
</div>
/* in asset/css/content/example/heading-sticky.scss */
.sticky-demo__heading { position: sticky; }
.sticky-demo__heading--h2 { top: 0; }
.sticky-demo__heading--h3 { top: var(--sticky-h2-height); }
/* lower headings use cumulative calc(...) offsets */

Sticky Table Regions

This compact table is intentionally wide and scrollable. It demonstrates only sticky header + sticky first column behavior, not production table UX.

Sticky Pattern Demo: Header Row + First Column
Row LabelCol 1Col 2Col 3Col 4Col 5Col 6Col 7Col 8Col 9Col 10Notes
Row A12345678901122334455Sticky test row
Row B15182124273033363942Horizontal overflow
Row C36912151821242730Header stays visible
Row D81321345589144233377610First column stays pinned
Row E9988776655443322110Layering check
Row F5101520253035404550Pattern only demo
Row G14284256708498112126140Vertical scroll demo
Row H149162536496481100Row-label context

Need a production-ready table system? Go to HTML Table

Code for This Render

This render uses the shared sticky table stylesheet plus a page-level wrapper for scroll sizing.

<div class="sticky-table__wrap table-sticky table-sticky--freeze-first table-sticky--center table-sticky--first-last-left">
  <table class="sticky-table content--sticky">
    <caption>Sticky Pattern Demo: Header Row + First Column</caption>
    <thead>...</thead>
    <tbody>...</tbody>
  </table>
</div>
/* shared: asset/css/content/example/table-sticky.scss */
.table-sticky table.content--sticky thead th { position: sticky; top: var(--sticky-caption-height, 0); }
.table-sticky--freeze-first table.content--sticky th:nth-child(1),
.table-sticky--freeze-first table.content--sticky td:nth-child(1) { position: sticky; left: 0; }

/* page wrapper: asset/css/content/example/html-sticky-element.scss */
.sticky-table__wrap { overflow: auto; max-height: 20rem; }

Implementation Notes

  • Sticky elements require a defined top or left offset.
  • Use opaque backgrounds and solid borders on sticky cells to avoid overlap artifacts.
  • Sticky tracks the nearest scrolling container; put overflow on the intended container.
  • Keep demos here focused on sticky mechanics; see html-table for table UX patterns and controls.

Files Used

  • Page HTML: in/example/html-sticky-element.html
  • Shared heading SCSS: in/asset/css/content/example/heading-sticky.scss
  • Shared sticky table SCSS: in/asset/css/content/example/table-sticky.scss
  • Page wrapper SCSS: in/asset/css/content/example/html-sticky-element.scss

Attribution