mirror of https://github.com/lukechilds/docs.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
527 lines
27 KiB
527 lines
27 KiB
<!DOCTYPE html>
|
|
<html lang="en-gb" dir="ltr">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Scrollspy - UIkit tests</title>
|
|
<script src="js/test.js"></script>
|
|
<style>
|
|
|
|
.test-fixed {
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 20px;
|
|
z-index: 1;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="uk-card uk-card-default uk-card-body test-fixed">
|
|
<h3 class="uk-card-title">Scrollspy Nav</h3>
|
|
<ul class="uk-nav uk-nav-default" uk-scrollspy-nav="closest: li; scroll: true">
|
|
<li><a href="#animation-repeat">Single</a></li>
|
|
<li><a href="#animation-delay">Group</a></li>
|
|
<li><a href="#animation-fade">Fade</a></li>
|
|
<li><a href="#animation-scale-up">Scale Up</a></li>
|
|
<li><a href="#animation-scale-down">Scale Down</a></li>
|
|
<li><a href="#animation-slide-left">Slide Left</a></li>
|
|
<li><a href="#animation-slide-right">Slide Right</a></li>
|
|
<li><a href="#animation-slide-top">Slide Top</a></li>
|
|
<li><a href="#animation-slide-bottom">Slide Bottom</a></li>
|
|
<li><a href="#animation-different">Different Animations</a></li>
|
|
<li><a href="#adjacent1">Adjacent 1</a></li>
|
|
<li><a href="#adjacent2">Adjacent 2</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="uk-container">
|
|
|
|
<h1>ScrollSpy</h1>
|
|
|
|
<h2 id="animation-repeat">Single, Repeat, Delay</h2>
|
|
|
|
<div class="uk-child-width-1-4@m" uk-grid uk-height-match="target: > div > .uk-card">
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-body" uk-scrollspy="cls: uk-animation-fade">
|
|
<p>The element is animated only the first time it appears in the viewport.</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-body" uk-scrollspy="cls: uk-animation-slide-right; repeat: true">
|
|
<p>The element is animated every time it appears in the viewport.</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-body" uk-scrollspy="cls: uk-animation-slide-right; delay: 1500; repeat: true">
|
|
<p>The element is animated every time it appears in the viewport but delayed by 1.5s.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 id="animation-delay">Group, Repeat, Delay</h2>
|
|
|
|
<div class="uk-child-width-1-4@m" uk-grid uk-scrollspy="cls: uk-animation-fade; target: > div > .uk-card; delay: 300; repeat: true">
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-body">
|
|
<p>The animation of this element is delayed by some milliseconds.</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-body">
|
|
<p>The animation of this element is delayed by some milliseconds.</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-body">
|
|
<p>The animation of this element is delayed by some milliseconds.</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-body">
|
|
<p>The animation of this element is delayed by some milliseconds.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 id="animation-fade">Group: Fade</h2>
|
|
|
|
<div class="uk-child-width-1-4@m uk-margin-xlarge-bottom" uk-grid uk-scrollspy="cls: uk-animation-fade; target: > div > .uk-card; delay: 300; repeat: true">
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-body">
|
|
<h3 class="uk-card-title">Fade</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-body">
|
|
<h3 class="uk-card-title">Fade</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-body">
|
|
<h3 class="uk-card-title">Fade</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-body">
|
|
<h3 class="uk-card-title">Fade</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 id="animation-scale-up">Group: Scale Up</h2>
|
|
|
|
<div class="uk-child-width-1-4@m uk-margin-xlarge-bottom" uk-grid uk-scrollspy="cls: uk-animation-scale-up; target: > div > .uk-card; delay: 300; repeat: true">
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-body">
|
|
<h3 class="uk-card-title">Scale Up</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-body">
|
|
<h3 class="uk-card-title">Scale Up</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-body">
|
|
<h3 class="uk-card-title">Scale Up</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-body">
|
|
<h3 class="uk-card-title">Scale Up</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-body">
|
|
<h3 class="uk-card-title">Scale Up</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-body">
|
|
<h3 class="uk-card-title">Scale Up</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-body">
|
|
<h3 class="uk-card-title">Scale Up</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-body">
|
|
<h3 class="uk-card-title">Scale Up</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div><div>
|
|
<div class="uk-card uk-card-default uk-card-body">
|
|
<h3 class="uk-card-title">Scale Up</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-body">
|
|
<h3 class="uk-card-title">Scale Up</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-body">
|
|
<h3 class="uk-card-title">Scale Up</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-body">
|
|
<h3 class="uk-card-title">Scale Up</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-body">
|
|
<h3 class="uk-card-title">Scale Up</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-body">
|
|
<h3 class="uk-card-title">Scale Up</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-body">
|
|
<h3 class="uk-card-title">Scale Up</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-body">
|
|
<h3 class="uk-card-title">Scale Up</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-body">
|
|
<h3 class="uk-card-title">Scale Up</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-body">
|
|
<h3 class="uk-card-title">Scale Up</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-body">
|
|
<h3 class="uk-card-title">Scale Up</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-body">
|
|
<h3 class="uk-card-title">Scale Up</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<h2 id="animation-scale-down">Group: Scale Down</h2>
|
|
|
|
<div class="uk-child-width-1-4@m uk-margin-xlarge-bottom" uk-grid uk-scrollspy="cls: uk-animation-scale-down; target: > div > .uk-card; delay: 300; repeat: true">
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-body">
|
|
<h3 class="uk-card-title">Scale Down</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-body">
|
|
<h3 class="uk-card-title">Scale Down</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-body">
|
|
<h3 class="uk-card-title">Scale Down</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-body">
|
|
<h3 class="uk-card-title">Scale Down</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 id="animation-slide-left">Group: Left</h2>
|
|
|
|
<div class="uk-child-width-1-4@m uk-margin-xlarge-bottom" uk-grid uk-scrollspy="cls: uk-animation-slide-left; target: > div > .uk-card; delay: 300; repeat: true">
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-body">
|
|
<h3 class="uk-card-title">Left</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-body">
|
|
<h3 class="uk-card-title">Left</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-body">
|
|
<h3 class="uk-card-title">Left</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-body">
|
|
<h3 class="uk-card-title">Left</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 id="animation-slide-right">Group: Right</h2>
|
|
|
|
<div class="uk-child-width-1-4@m uk-margin-xlarge-bottom" uk-grid uk-scrollspy="cls: uk-animation-slide-right; target: > div > .uk-card; delay: 300; repeat: true">
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-body">
|
|
<h3 class="uk-card-title">Right</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-body">
|
|
<h3 class="uk-card-title">Right</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-body">
|
|
<h3 class="uk-card-title">Right</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-body">
|
|
<h3 class="uk-card-title">Right</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 id="animation-slide-top">Group: Top</h2>
|
|
|
|
<div class="uk-child-width-1-4@m uk-margin-xlarge-bottom" uk-grid uk-scrollspy="cls: uk-animation-slide-top; target: > div > .uk-card; delay: 300; repeat: true">
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-body">
|
|
<h3 class="uk-card-title">Top</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-body">
|
|
<h3 class="uk-card-title">Top</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-body">
|
|
<h3 class="uk-card-title">Top</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-body">
|
|
<h3 class="uk-card-title">Top</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 id="animation-slide-bottom">Group: Bottom</h2>
|
|
|
|
<div class="uk-child-width-1-4@m uk-margin-xlarge-bottom" uk-grid uk-scrollspy="cls: uk-animation-slide-bottom; target: > div > .uk-card; delay: 300; repeat: true">
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-body">
|
|
<h3 class="uk-card-title">Bottom</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-body">
|
|
<h3 class="uk-card-title">Bottom</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-body">
|
|
<h3 class="uk-card-title">Bottom</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-body">
|
|
<h3 class="uk-card-title">Bottom</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 id="animation-different">Different Animations</h2>
|
|
|
|
<div class="uk-child-width-1-4@m uk-margin-xlarge-bottom" uk-grid uk-scrollspy="cls: uk-animation-slide-bottom; target: > div > .uk-card; delay: 300; repeat: true">
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-body">
|
|
<h3 class="uk-card-title">Bottom</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-body" uk-scrollspy-class="uk-animation-slide-top">
|
|
<h3 class="uk-card-title">Top</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-body">
|
|
<h3 class="uk-card-title">Bottom</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="uk-card uk-card-default uk-card-body" uk-scrollspy-class="uk-animation-slide-top">
|
|
<h3 class="uk-card-title">Top</h3>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Adjacent Sibling</h2>
|
|
|
|
<div id="adjacent1" class="uk-section uk-section-primary uk-text-center">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
<div id="adjacent2" class="uk-section uk-section-secondary uk-text-center">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
</div>
|
|
|
|
<h2>JavaScript Options</h2>
|
|
|
|
<h3>Scrollspy</h3>
|
|
|
|
<div class="uk-overflow-auto">
|
|
<table class="uk-table uk-table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Option</th>
|
|
<th>Value</th>
|
|
<th>Default</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><code>cls</code></td>
|
|
<td>String</td>
|
|
<td>uk-scrollspy-inview</td>
|
|
<td>Class to add when the element is in view. If two, comma separated classes are provided those will be toggled.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>hidden</code></td>
|
|
<td>Boolean</td>
|
|
<td>true</td>
|
|
<td>Hides the element while out of view.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>offset-top</code></td>
|
|
<td>Number</td>
|
|
<td>0</td>
|
|
<td>Top offset before triggering in view.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>offset-left</code></td>
|
|
<td>Number</td>
|
|
<td>0</td>
|
|
<td>Left offset before triggering in view.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>repeat</code></td>
|
|
<td>Boolean</td>
|
|
<td>false</td>
|
|
<td>Applies the 'cls' class every time the element is in view.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>delay</code></td>
|
|
<td>Number</td>
|
|
<td>0</td>
|
|
<td>Delay time in ms.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<h3>Scrollspy Nav</h3>
|
|
|
|
<div class="uk-overflow-auto">
|
|
<table class="uk-table uk-table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Option</th>
|
|
<th>Value</th>
|
|
<th>Default</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><code>cls</code></td>
|
|
<td>String</td>
|
|
<td>uk-active</td>
|
|
<td>Class to add to the active links.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>closest</code></td>
|
|
<td>String</td>
|
|
<td>uk-scrollspy-init-inview</td>
|
|
<td>Target to apply the class to.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>scroll</code></td>
|
|
<td>Boolean</td>
|
|
<td>false</td>
|
|
<td>Adds the Scroll component to its links.</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>overflow</code></td>
|
|
<td>Boolean</td>
|
|
<td>true</td>
|
|
<td>If overflow is set to true, the first or last item will stay active if above or below the navigation.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|
|
|