Add a line containing links to your sections. The line acts as a scrollbar.

Javascript :
Use Jquery

CSS:

html,body {
  height: 100%;
}

npm install metroline.js

OR

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 title" id="Link1" class="fixed">
...
</section>
<section data-title="Link2 title" id="Link2" class="scrolling">
...
</section>

Finally, fire the javascript :

$(window).load(function(){ new Metroline(); });

Note For best style, it assumes you have at least the following css reset :

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

ul,li {
	list-style-type: none;
}

Code cleaning

Fixed bug wrongly displaying titles in some cases

Handle window resize. Some code refactoring

Take care that there is no links already present when adding links.

Fixed a style bug with the first link. Now javascript automatically add "active" class for the first <li>...</li>

Changed the way links switch style when scrolled. Now use a class "active" instead of manually apply style via javascript.

First release