example.html

<title>Menu Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<style>
	body {
		padding: 20px;
		padding-bottom: 500px;
		font: 1em comic sans ms, arial;
		text-align: center;
	}
	ul {
		position: fixed;
		padding-left: 0;
	}
	ul li {
		list-style: none;
		padding: 10px;
		border-radius: 3px;
		width: 130px;
	}
	ul li.active {
		background: #019dff;
	}
	.content {
		margin-left: 200px;
	}
	.item {
		display: block;
		background: #eee;
		margin-bottom: 20px;
	}
	.item span {
		line-height: 300px;
	}
</style>

<ul>
	<li><a href="#item1">Item 1</a></li>
	<li><a href="#item2">Item 2</a></li>
	<li><a href="#item3">Item 3</a></li>
	<li><a href="#item4">Item 4</a></li>
	<li><a href="#item5">Item 5</a></li>
	<li><a href="#item6">Item 6</a></li>
	<li><a href="#item7">Item 7</a></li>
	<li><a href="#item8">Item 8</a></li>
	<li><a href="#item9">Item 9</a></li>
	<li><a href="#item10">Item 10</a></li>
</ul>
<div class="content">
	<h2>Scroll/Resize this page!</h2>
	<div class="item" id="item1"><span>Item 1</span></div>
	<div class="item" id="item2"><span>Item 2</span></div>
	<div class="item" id="item3"><span>Item 3</span></div>
	<div class="item" id="item4"><span>Item 4</span></div>
	<div class="item" id="item5"><span>Item 5</span></div>
	<div class="item" id="item6"><span>Item 6</span></div>
	<div class="item" id="item7"><span>Item 7</span></div>
	<div class="item" id="item8"><span>Item 8</span></div>
	<div class="item" id="item9"><span>Item 9</span></div>
	<div class="item" id="item10"><span>Item 10</span></div>
</div>

<script>
	var topmost = require('./index')
	var classes = require('classes')

	var items = document.querySelectorAll('.item')
	var tabs = document.querySelectorAll('ul > li')
	var active = tabs[0]

	topmost(items, function(el, i){
		classes.remove('active', active)
		classes.add('active', active = tabs[i])
	})
</script>