Double Agent Scroll
JS Module that automatically updates nav element or list group based on scroll position to indicate which link is currently active in the viewport. Also, when nav elements or list groups are clicked smooth scroll is being applied plus history push state.
⌨️ Install from the command line:
$ npm install @inhaltone/[email protected]
Install via package.json:
"@inhaltone/double-agent-scroll": "1.0.4"
Use
import module to your app
import {DoubleAgentScroll} from "@inhaltone/double-agent-scroll";
Initialize Double Agent Scroll by creating an instance
const doubleAgentScroll = new DoubleAgentScroll(...);
By default, the instance captures the below mark up structure
HTML Layout
<!-- Navigation container -->
<nav>
<!-- link -->
<a href="#sectionFirst" data-target="sectionFirst" class="double-agent-link active">
sectionFirst
</a>
<a href="#sectionSecond" data-target="sectionSecond" class="double-agent-link">
sectionSecond
</a>
...
</nav>
<!-- Scroll Agent container -->
<div id="double-agent">
<!-- Scroll Agent section to spy on -->
<section id="sectionFirst" class="double-agent-section">
<h2>sectionFirst</h2>
</section>
<section id="sectionSecond" class="double-agent-section">
<h2>sectionSecond</h2>
</section>
...
</div>
Initialize DoubleAgentScroll
const doubleAgentScroll = new DoubleAgentScroll('#double-agent', {
offsetTop: Number,
navClass: String,
sectionClass: String
});
Methods
// Get links
const navElements = doubleAgentScroll.getNavElements();
// Get sections
const sectionElements = doubleAgentScroll.getSectionElements();