StickyCTA Component

The StickyCTA component creates a fixed-position call-to-action that appears when a specified element is no longer visible in the viewport.

Features:

• Fixed to top on desktop
• Fixed to bottom on mobile
• Uses ViewportObserver to track visibility
• Appears when replaces element exits viewport
• Hides when replaces element enters viewport

Basic Usage

---
import { StickyCTA, ViewportObserver } from '@dynamic-type/ddi';
---

<ViewportObserver />

<div data-ddi-viewport data-ddi-prohibit="test-cta">
    Original CTA Button
</div>

<StickyCTA prohibitMessage="hide-cta">
    <button>Sticky CTA</button>
</StickyCTA>

Scroll down to see the sticky CTA in action…