UxStickyBand

Set it up — once, in the layout

Mount UxStickyBand at the top of the content column, inside the relative wrapper that holds the global filter, with negative margins over the column's padding. Pass title for the two-column band. Pages need nothing: the title and the pills join on their own.

<main class="flex-1 min-w-0 px-8 py-8">
  <div class="relative">
    <!-- the band: its backing and its switch (title = the c106 two-column band) -->
    <UxStickyBand title class="-mx-8" />
    <!-- the global filter, a band member -->
    <div class="pointer-events-none absolute inset-0 -top-10 z-40 flex flex-col items-end [&>*]:pointer-events-auto">
      <Filter band :stickyTop="8" v-model:keyValFilters="filters" … />
    </div>
    <slot />
  </div>
</main>

<!-- a direct child of the page: no wrapper around the title -->
<UxPageTitle :breadcrumb="crumbs" :rowMinHeight="44">Payments</UxPageTitle>
<p>Who is on the Payments team…</p>
<TeamHeader … />                       <!-- not part of the band -->
<NavJumpPills :sections="SECTIONS" />  <!-- joins on its own -->
<section id="installs">…</section>

Two layouts

Members

Scrolling (c106)

• rest — the title hasn't pinned: nothing restyles. The backing never shows at scroll 0.
• down — the title has pinned: the band compacts (1s, quint-in-out). When the pills reach their line they dock and the band extends under them (200ms, ease-out) — until then it ends under the title, so the pills rise into open space.
• up — tracked (24px of travel flips it) but drawn exactly as down while STICKY_BAND.upRestyles is false. On, it is an in-between set — title 20px, filter labels back — growing over 2s.
• A pill jump holds the mode through its smooth scroll and lands 16px under the compact band.
• Members style by look (the mode as drawn), never by mode. prefers-reduced-motion drops every transition.

Rules for consumers

• Nothing in the band may change the page's flow. The title and the pills are sticky boxes that keep their rest height and restyle inside it; the filter and the backing take no flow space. That is why a mode change can't feed back into the scroll that caused it.
• The title must be a direct child of a tall element (the page). A sticky box can't leave its parent — a wrapper around UxPageTitle traps it. Use rowMinHeight instead of a wrapper that sets the row's height.
• One title drives the band. The first UxPageTitle to join holds the slot; others on the page stay plain.
• Scroll boxes reset the band. A vertical scroll box holding a non-compact table sets --q-sticky-top: 0px inside (UxModal and UxOverflowX already do), or its header is pushed down within it.

Published on <html>

STICKY_BAND (auto-imported)

Geometry and motion in one place — every row has a fixed height per look, so the band's height is known before it is drawn (a jump has to land under the compact band before the band has compacted).

useStickyBand() exposes the state for custom members and readouts: mode, look, top, topDown, titleBand, showBacking, and onFlip(fn) for instrumentation.