1.0.0 • Published 8 years ago
scrolling-highlight v1.0.0
Welcome to Scrolling Highlight.
Tired of maintaining projects riddled with un-necessary and bloated dependencies? If you said yes, then you can see yourself out and go write a really un-interesting blog post about it. If you said no, then great! Let's get started!
Getting Started
Note: Before using this library make sure you have set up both AngularJS and jQuery in your project.
Example of how to use:
<nav>
<ul>
<li ng-class="{'active': currentSection == 'section1'}">
<a href="#section1">Section 1</a>
</li>
<li ng-class="{'active': currentSection == 'section2'}">
<a href="#section2">Section 1</a>
</li>
<li ng-class="{'active': currentSection == 'section3'}">
<a href="#section3">Section 1</a>
</li>
</ul>
</nav>
<section class="wrapper" scrolling-highlight="sections" scrolling-highlight-callback="setCurrentSection">
<div id="section1"></div>
<div id="section2"></div>
<div id="section3"></div>
</section>
To make this work, ensure you have:
1. Added the ng-class
directive to the elements you want highlight
2. Added scrolling-highlight="sections"
and scrolling-highlight-callback="setCurrentSection"
on the element wrapping your sections
3. Added the individual section id's to the markup
1.0.0
8 years ago