# scrollspy

The markup of every demo on <https://kuiper.oeds.it/scrollspy/>, extracted from that
page. It is generated, so it cannot disagree with what the page renders.

Load the framework from the origin and read <https://kuiper.oeds.it/docs/KUIPER.md> first:
a Kuiper class carries no prefix and a UIkit behavior attribute carries `data-`.

## cls

Varies: 6 specimens.

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card" data-scrollspy="cls: animation-fade"><div class="height-s background-white-dark"><p class="background-muted text-center">fade</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card" data-scrollspy="cls: animation-slide-top"><div class="height-s background-white-dark"><p class="background-muted text-center">slide-top</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card" data-scrollspy="cls: animation-slide-bottom"><div class="height-s background-white-dark"><p class="background-muted text-center">slide-bottom</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card" data-scrollspy="cls: animation-slide-left"><div class="height-s background-white-dark"><p class="background-muted text-center">slide-left</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card" data-scrollspy="cls: animation-slide-right"><div class="height-s background-white-dark"><p class="background-muted text-center">slide-right</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card" data-scrollspy="cls: animation-scale-up"><div class="height-s background-white-dark"><p class="background-muted text-center">scale-up</p></div></div></div>
</div>
```

## option

Varies: 3 specimens.

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card" data-scrollspy="cls: animation-fade; repeat: true"><div class="height-s background-white-dark"><p class="background-muted text-center">repeat</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card" data-scrollspy="cls: animation-fade; delay: 300"><div class="height-s background-white-dark"><p class="background-muted text-center">delay</p></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card" data-scrollspy="cls: animation-fade; hidden: false"><div class="height-s background-white-dark"><p class="background-muted text-center">hidden false</p></div></div></div>
</div>
```

## target

Varies: 7 specimens.

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-1@m width-1-1@l width-1-1@xl"><div class="card" data-scrollspy="cls: animation-slide-bottom; target: .card-white; delay: 200; repeat: true"><div class="grid-xs" data-grid><div class="width-1-1 width-1-3@m"><div class="card card-white padding-4xs text-center"><p class="background-muted">1</p></div></div><div class="width-1-1 width-1-3@m"><div class="card card-white padding-4xs text-center"><p class="background-muted">2</p></div></div><div class="width-1-1 width-1-3@m"><div class="card card-white padding-4xs text-center"><p class="background-muted">3</p></div></div><div class="width-1-1 width-1-3@m"><div class="card card-white padding-4xs text-center"><p class="background-muted">4</p></div></div><div class="width-1-1 width-1-3@m"><div class="card card-white padding-4xs text-center"><p class="background-muted">5</p></div></div><div class="width-1-1 width-1-3@m"><div class="card card-white padding-4xs text-center"><p class="background-muted">6</p></div></div></div></div></div>
</div>
```

## nav

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-2@xl"><div class="card"><ul class="list" data-scrollspy-nav="closest: li; scroll: true"><li><a href="#scrollspy">scrollspy</a></li><li><a href="#top">top</a></li></ul></div></div>
</div>
```
