metroline.js

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