Default Theme Dark Theme
Tornado Logo
Tornado has become Phenix Design System

» Scrollspy

scrollspy is an effect that tracks certain elements and activate a list item with the current viewed area on the user screen if it matchs the ID in that item.

Scroll Spy Initialize

tornado provide a method to create a scrollspy list when scroll detact if the list item matches the current section in view point of the screen and add html class active and you can call it like this Tornado.scrollSpy({..options..}); and you can eather target a link with href target id or you can add attribute [data-target=”ID”] and you can activate thescroll spy direct by adding scrollspy class name to you spy menu.

//=====> Import Tornado Methods <=====//
import Tornado from './Base/Tornado';

//====> Scroll Spy <====//
Tornado.scrollSpy({
    selector : '.ui-list',  //====> Spy Agents List to identfy the Sections
    duration : 2000,        //====> Scroll Animation Speed in ms
});

<ul class="scrollspy">
    <li><a href="#target">....</a></li>
    <li data-target="#target">...</li>
</ul>

ScrollSpy Markup

in order to create and apply the Scrollspy Effect first we create and Menu with ul tag and class name scrollspy and inside the menu we create our list items with li from here there is two ways to create the scroll event effect and identfiy it #01 adding a attribute data-target=”#ID” to the li tag element or create inside the li a Hyperlink element and write the ID inside the href attribute and you can change the animation speed with attribute data-duration with millisecond

<!-- Scrollspy Trackers List -->
<ul class="scrollspy">
    <li><a href="#section-1">Section 01</a></li>
    <li data-target="#section-2">Section 02</a></li>
    <li><a href="#section-3" data-duration="3000">Section 03</a></li>
    <li><a href="#section-4">Section 04</a></li>
</ul>

<!-- Tracked Elements -->
<div id="section-1"></div>
<div id="section-2"></div>
<div id="section-3"></div>
<div id="section-4"></div>

Scrollspy Demo

Section Number 01
Section Number 02
Section Number 03
Section Number 04

Copyright (c) 2016-present, Tornado UI Licensed under the terms of the MIT License.