metroline.js v0.1.3
Metroline
Add a line containing links to your sections. The line acts as a scrollbar.
Prerequiste
Use Jquery
Install
Get the javascript and css (or scss) files from the dist folder and include them.
In your html, add after the body tag :
<div id="scrollbar">
<div id="scrollcursor">
</div>
<ul id="scrolllinks">
</ul>
</div>
Then you need a section for each link. A section must have an id and the link's title :
<section data-title="Link1" id="Link1">
...
</section>
Finally, fire the javascript :
new Metroline();
Note For best style, I assume you have at least the following css reset :
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul,li {
list-style-type: none;
}
Changelog
v0.1.2
Code cleaning
v0.1.1
Fixed bug wrongly displaying titles in some cases
v0.1.0
Handle window resize. Some code refactoring
v0.0.4
Take care that there is no links already present when adding links.
v0.0.3
Fixed a style bug with the first link. Now javascript automatically add "active" class for the first <li>...</li>
v0.0.2
Changed the way links switch style when scrolled. Now use a class "active" instead of manually apply style via javascript.
v0.0.1
First release