追従状態検知

<%# Markup for the sticky-observer (stuck-state detection) demo.
    The library watches a sentinel's intersection with IntersectionObserver and syncs
    data-stuck="true" once the sticky element actually sticks. position: sticky and the
    shadow rendering are owned by demo.css. rootSelector specifies the scroll parent
    (this demo frame). %>
<div class="sticky-demo" data-controller="stimeo--sticky-observer"
     data-stimeo--sticky-observer-root-selector-value=".sticky-demo__scroll">
  <%# The scroll box is a labelled, focusable region so it can be scrolled with the
      keyboard alone (arrows / PageDown) in every browser, not only the ones that
      make scrollers focusable by themselves. %>
  <div class="sticky-demo__scroll" role="region" tabindex="0"
       aria-label="<%= t('components.sticky_observer.demo.viewport_label') %>">
    <%# Place the sentinel right before the sticky element. A 1px non-zero height keeps
        intersection detection stable. %>
    <div class="sticky-demo__sentinel" aria-hidden="true"
         data-stimeo--sticky-observer-target="sentinel"></div>
    <header class="sticky-demo__header" data-stimeo--sticky-observer-target="element">
      <%= t("components.sticky_observer.demo.header") %>
    </header>
    <div class="sticky-demo__body">
      <% 8.times do |i| %>
        <p><%= t("components.sticky_observer.demo.paragraph", number: i + 1) %></p>
      <% end %>
    </div>
  </div>
</div>

/* Presentation CSS for sticky-observer. The library only syncs data-stuck, so
   position: sticky and the "show a shadow once stuck" look are drawn here by reading data-stuck. */
.sticky-demo {
  max-width: 460px;
}

/* The scroll parent (the element rootSelector points to). Stickiness is judged relative to it. */
.sticky-demo__scroll {
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  position: relative;
}

/* The scroll box takes focus (tabindex="0") so it can be scrolled by keyboard. */
.sticky-demo__scroll:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.sticky-demo__sentinel {
  height: 1px;
}

/* position: sticky is owned by the consumer's CSS; data-stuck is set by the library. */
.sticky-demo__header {
  position: sticky;
  top: 0;
  padding: 0.75rem 1rem;
  background: var(--surface-card);
  font-weight: 600;
  color: var(--color-text);
  border-bottom: 1px solid var(--border-default);
  transition: box-shadow 0.2s ease, background 0.2s ease;
}

/* Once stuck, show a shadow to convey that it's "floating". */
.sticky-demo__header[data-stuck="true"] {
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
  /* Layer the tint (translucent in dark mode) over the opaque card so the sticky header
     never lets scrolling content show through. */
  background:
    linear-gradient(var(--color-primary-soft), var(--color-primary-soft)), var(--surface-card);
}

.sticky-demo__body {
  padding: 0 1rem 1rem;
}

.sticky-demo__body p {
  color: var(--color-text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .sticky-demo__header {
    transition: none;
  }
}