ScrollMenu.js

ScrollMenu.js is a new interface to replace your old boring scrollbar.

Why Scroll Menu ?

• ScrollMenu.js transforms your scroll bar to awesome scroll menu.
• Single page navigation menu and scroll bar binds together.
• It gives a user sense of where they are in a page and how long is that section.
• With a high customizability of plugin you can have a unique user experience.
• Allow templating for menu content.
• Styling is seperated out to css, so you can change look of scrollMenu to have uniqueness.
• Support touch devices.
• Uses native scroll and can be easily hooked with any custom scroll.
• Its light weight (< 3kb gzipped and minified).

Source: ignitersworld.com

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" type="text/css" href="../../scrollmenu.css">
<script src="../assets/js/jquery.js"></script>
<script src="../../scrollmenu.js"></script>

2. HTML

<section class="section" id="section1">
	<div class="content">
		Section 1
	</div>
</section>
<section class="section" id="section2">
	<div class="content">Section 2</div>
</section>
<section class="section" id="section3">
	<div class="content">Section 3</div>
</section>
<section class="section" id="section4">
	<div class="content">Section 4</div>
</section>
<section class="section" id="section5">
	<div class="content">Section 5</div>
</section>

3. JAVASCRIPT

//base setup
var setupOption = {
	template: '<div class="menu-wrap"><div class="menu"><%= label %></div></div>',
	anchorSetup: [
		{
			backgroundColor: "#dc767d",
			label: "Section 1"
			},
		{
			backgroundColor: "#36d278",
			label: "Section 2"
			},
		{
			backgroundColor: "#22cfc6",
			label: "Section 3"
			},
		{
			backgroundColor: "#8794a1",
			label: "Section 4"
			},
		{
			backgroundColor: "#1ccdaa",
			label: "Section 5"
		}]
};
var scrollMenu = ScrollMenu(setupOption);

4. OPTIONS

 //default values for plugin
var defaults = {
        sectionClass: 'section',
        menuType: 'vertical', //can be vertical or horizontal and horizontal-menu
        appendTo: null, //defaults to container
        animateOnScroll: true,
        nativeScroll: true,
        scrollbarVisible: false,
        onhover: voidFun,
        onhoverOut: voidFun,
        onscrollToSection: voidFun,
        menuMod: voidFun, // a callback to modify menu or add interaction after its been added to menu
        anchorSetup: [],
        animationDuration: 600,
        scrollAnchorSpacing: 10
 };