Sticky

Wrapper that goes sticky at a configurable offset and emits a stuck attribute/event for visual state changes.

Components

Sticky

layout

interactive

<arc-sticky>

Overview

Sticky is a layout wrapper that applies `position: sticky` to its children and uses an IntersectionObserver to detect when the element has actually become stuck to the viewport edge. When the stuck state changes, the component sets a `stuck` attribute on the host element and fires an `arc-stuck` event, so you can change visuals downstream (add a shadow, change the background, toggle a border) without wiring a scroll listener. The `offset` prop controls the `top` value for the sticky positioning (e.g. "0px" for flush with the viewport top, "64px" to account for a fixed top bar). The IntersectionObserver sentinel technique does not rely on scroll events, so stuck detection stays cheap on complex pages with many sticky elements. Common use cases include section headers that stick as the user scrolls through a long list, toolbar rows that become fixed under a top bar, and table column headers in scrollable data regions. Sticky handles the positioning and detection; your styles respond to the `[stuck]` attribute for visual feedback.

Guidelines

When to use

Use for section headers in long scrollable lists or content areas
Use for toolbar rows that should stick below a fixed top bar (set offset to top bar height)
Style the stuck state via the `[stuck]` attribute selector for shadows, borders, or background changes
Listen for the `arc-stuck` event when you need to update application state on stick/unstick
Set offset to match any fixed headers above the sticky element to avoid overlap

When not to use

Do not use Sticky for elements that should be `position: fixed`: Sticky respects scroll context
Do not nest Sticky inside another Sticky in the same scroll container
Do not rely on Sticky for critical layout structure: it is a progressive enhancement
Do not set offset to a negative value: the element will stick above the viewport edge
Do not use Sticky when the parent container does not have overflow scroll: sticky has no effect without a scrollable ancestor

Features

CSS `position: sticky` with configurable `top` offset via the `offset` prop
IntersectionObserver-based stuck detection: no scroll event listeners
Sets a `stuck` boolean attribute on the host when the element is stuck
Fires `arc-stuck` custom event with `{ stuck: boolean }` detail for state synchronization
Sentinel technique that works with many sticky elements on the same page
CSS part: `sticky` for targeted ::part() styling
Works inside any scrollable container as well as the viewport

Preview

Scroll down to see the sticky header

Sticky Section Header

List item 1

List item 2

List item 3

List item 4

List item 5

List item 6

List item 7

List item 8

Usage

This component requires JavaScript. No pure HTML/CSS version is available. Use the Web Component directly or a framework wrapper.

<arc-sticky offset="0px">
  <div class="section-header">Section Title</div>
</arc-sticky>

<style>
  arc-sticky[stuck] .section-header {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    background: var(--bg-surface-overlay);
    backdrop-filter: blur(8px);
  }
</style>

<script>
  const sticky = document.querySelector('arc-sticky');
  sticky.addEventListener('arc-stuck', (e) => {
    console.log('Stuck:', e.detail.stuck);
  });
</script>

import { Sticky } from '@arclux/arc-ui-react';

function StickyHeader() {
  return (
    <Sticky offset="64px" onArcStuck={(e) => console.log('Stuck:', e.detail.stuck)}>
      <div className="section-header">Section Title</div>
    </Sticky>
  );
}

<script setup>
import { Sticky } from '@arclux/arc-ui-vue';

function onStuck(e: CustomEvent) {
  console.log('Stuck:', e.detail.stuck);
}
</script>

<template>
  <Sticky offset="64px" @arc-stuck="onStuck">
    <div class="section-header">Section Title</div>
  </Sticky>
</template>

<script>
  import { Sticky } from '@arclux/arc-ui-svelte';
</script>

<Sticky offset="64px" on:arc-stuck={(e) => console.log('Stuck:', e.detail.stuck)}>
  <div class="section-header">Section Title</div>
</Sticky>

import { Component } from '@angular/core';
import { Sticky } from '@arclux/arc-ui-angular';

@Component({
  imports: [Sticky],
  template: `
    <arc-sticky offset="64px" (arcStuck)="onStuck($event)">
      <div class="section-header">Section Title</div>
    </arc-sticky>
  `,
})
export class StickyHeaderComponent {
  onStuck(e: CustomEvent) {
    console.log('Stuck:', e.detail.stuck);
  }
}

import { Sticky } from '@arclux/arc-ui-solid';

function StickyHeader() {
  return (
    <Sticky offset="64px" onArcStuck={(e) => console.log('Stuck:', e.detail.stuck)}>
      <div class="section-header">Section Title</div>
    </Sticky>
  );
}

import { Sticky } from '@arclux/arc-ui-preact';

function StickyHeader() {
  return (
    <Sticky offset="64px" onArcStuck={(e) => console.log('Stuck:', e.detail.stuck)}>
      <div class="section-header">Section Title</div>
    </Sticky>
  );
}

API

offsetstring='0px': The CSS top value for sticky positioning. Set to "64px" to stick below a 64px top bar, or "0px" to stick flush with the viewport/scroll container edge.
stuckboolean=false: Read-only attribute set by the IntersectionObserver when the element is currently stuck. Use the [stuck] CSS selector to style the stuck state.

Events

arc-stuck: Fired when the stuck state changes. Event detail contains { stuck: boolean } indicating whether the element is currently stuck.

Sticky

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

Events

See Also

Docs

Project

Arclight