Scrollspy

Available as: Web ComponentShortcodeOxygen Element

Automatically add CSS classes to navigation items and content elements depending on the scroll position.

<spx-tailwind style="width: 100%;"> <style> .font-bold { font-weight: 600; } </style> <div class="w-full grid gap-6 grid-cols-4 h-[500vh]"> <div class="sticky h-[max-content] top-4 lg:top-8 col-span-1 rounded-xl bg-gradient-to-bl to-slate-800 from-slate-900"> <spx-scrollspy nav-class="font-bold"> <div class="p-8 flex flex-col"> {% for item in [1,2,3,4,5] %} <a class="text-white" href="#link-{{ item }}">Link {{ item }}</a> {% endfor %} </div> </spx-scrollspy> </div> <div class="col-span-3"> {% for item in [1,2,3,4,5] %} <div id="link-{{ item }}" class="h-screen rounded-xl flex items-center justify-center w-full {{ item is odd ? 'bg-gray-100' }}"> Section {{ item }} </div> {% endfor %} </div> </div> </spx-tailwind>

Link 1 Link 2 Link 3 Link 4 Link 5

Section 1

Section 2

Section 3

Section 4

Section 5

Properties

nav-class

Type: stringDefault: spx-scrollspy__nav--active

Applied class to active navigation element.

root-margin

Type: stringDefault: 0px

Intersection observer root margin.

target

Type: stringDefault: a

Target element. Can take any querySelector value. (id, class, tag etc.)

threshold

Type: numberDefault: 0.5

Intersection observer threshold.

url-change

Type: booleanDefault: false

Appends the currently active link to the end of the URL.

Slots

inner

Slot (between HTML tag).

Events

spxScrollspyDidLoad

Fires after component has loaded.