Sticky Scroll Effect

Element pinning in place during part of the scroll.

html

<div class="mot-stk-wrap">
  <div class="mot-stk-scroller">
    <div class="mot-stk-header mot-stk-header--sticky" data-edge="top" style="background:#E8A020; top:8px;">Section heading</div>
    <p class="mot-stk-line">Row one</p>
    <p class="mot-stk-line">Row two</p>
    <p class="mot-stk-line">Row three</p>
    <p class="mot-stk-line">Row four</p>
    <p class="mot-stk-line">Row five</p>
    <p class="mot-stk-line">Row six</p>
  </div>
  <p class="mot-stk-caption">Scroll the box &middot; header pins to the top</p>
</div>
<style>
.mot-stk-wrap { width: 100%; max-width: 320px; font: 12px system-ui, sans-serif; color: #241430aa; }
.mot-stk-scroller { height: 130px; overflow-y: auto; border: 1px solid #24143022; border-radius: 12px; background: #FAF7F2; }
.mot-stk-header { padding: 8px 12px; font: 700 13px system-ui, sans-serif; color: #241430; }
.mot-stk-header--sticky { position: sticky; }
.mot-stk-line { margin: 0; padding: 10px 12px; border-top: 1px solid #24143014; }
.mot-stk-caption { margin: 8px 0 0; }
</style>

tailwind

<div class="w-full max-w-[320px] font-sans text-xs text-[#241430]/70">
  <div class="h-[130px] overflow-y-auto border border-[#24143022] rounded-xl bg-[#FAF7F2]">
    <div class="tw-stk-header tw-stk-sticky px-3 py-2 font-bold text-sm text-[#241430]" data-edge="top" style="background:#E8A020; top:8px;">Section heading</div>
    <p class="m-0 px-3 py-2.5 border-t border-[#24143014]">Row one</p>
    <p class="m-0 px-3 py-2.5 border-t border-[#24143014]">Row two</p>
    <p class="m-0 px-3 py-2.5 border-t border-[#24143014]">Row three</p>
    <p class="m-0 px-3 py-2.5 border-t border-[#24143014]">Row four</p>
    <p class="m-0 px-3 py-2.5 border-t border-[#24143014]">Row five</p>
    <p class="m-0 px-3 py-2.5 border-t border-[#24143014]">Row six</p>
  </div>
  <p class="mt-2">Scroll the box &middot; header pins to the top</p>
</div>
<style>
.tw-stk-sticky { position: sticky; }
</style>

react

export function StickyScrollEffect({
  sticky = true,
  offset = 8,
  edge = "top",
  accent = "#E8A020",
}) {
  const rows = ["Row one", "Row two", "Row three", "Row four", "Row five", "Row six"];
  const headerStyle = { padding: "8px 12px", fontWeight: 700, fontSize: 13, color: "#241430", background: accent, position: sticky ? "sticky" : "static", [edge]: offset };
  return (
    <div style={{ width: "100%", maxWidth: 320, fontFamily: "system-ui, sans-serif", fontSize: 12, color: "#241430aa" }}>
      <div style={{ height: 130, overflowY: "auto", border: "1px solid #24143022", borderRadius: 12, background: "#FAF7F2" }}>
        <div style={headerStyle}>Section heading</div>
        {rows.map((r) => (
          <p key={r} style={{ margin: 0, padding: "10px 12px", borderTop: "1px solid #24143014" }}>{r}</p>
        ))}
      </div>
      <p style={{ margin: "8px 0 0" }}>Scroll the box &middot; header {sticky ? `pins to the ${edge}` : "scrolls away normally"}</p>
    </div>
  );
}