SCROLL SPY INITIALIZE

tornado provide a method to create a Scrollspy list when scroll detect 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 either target a link with href target id or you can add attribute [data-target=”ID”] and you can activate the scroll 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 identify 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>