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>