<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Example</title>
<style type="text/css">
body {
background:url(bg.jpg) no-repeat;
background-size:cover;
background-attachment:fixed;
color:#FFF;
font-family:'Helvetica Neue', sans-serif;
position:relative;
}
h1{
font-size:120px;
text-transform:uppercase;
border-bottom:2px solid #FFF;
padding-bottom:50px;
}
h2{
font-size:42px;
}
p{
font-size:21px;
}
#content{
width:60%;
margin-left:30%;
box-sizing:border-box;
}
#nav{
left:5%;
width:15%;
top:100px;
position:fixed;
}
#nav ul{
margin:0;
padding:0;
list-style:none;
}
#nav ul li a{
color:#FFF;
text-decoration:none;
font-size:32px;
line-height:2;
border-bottom:1px solid rgba(255,255,255,.2);
display:block;
text-indent:10px;
transition:all .5s;
-webkit-transition:all .5s;
}
#nav ul li a.scrolling{
color:#FF0;
text-indent:0;
border-bottom:10px solid #FF0;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#chap1" id="link1">Chap 1</a></li>
<li><a href="#chap2" id="link2">Chap 2</a></li>
<li><a href="#chap3" id="link3">Chap 3</a></li>
<li><a href="#chap4" id="link4">Chap 4</a></li>
</ul>
</div>
<div id="content">
<h1>Pellentes</h1>
<h2 id="chap1">Chap 1</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis sapien sit amet diam mollis, fringilla lobortis magna ullamcorper. Aliquam lobortis ac nisi at interdum. Cras id viverra sem, id elementum lorem. Curabitur ante nisi, pulvinar sit amet facilisis non, mollis at lectus. Nunc aliquam ipsum vel odio maximus, quis rutrum urna sodales. Ut tristique facilisis lorem, sit amet fermentum enim elementum sed. Quisque porta laoreet felis id iaculis. Cras tortor lorem, tempor vel nulla rutrum, volutpat porta nunc. Nulla placerat orci ut porttitor auctor. Suspendisse blandit mi in lorem ultricies sagittis. Vivamus dignissim urna non tortor suscipit dignissim. Aliquam dictum sem imperdiet lectus efficitur condimentum. Nullam viverra neque eu leo cursus suscipit. Vestibulum in odio iaculis, consectetur turpis et, sollicitudin urna.
</p>
<p>
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi convallis felis diam, ac feugiat erat bibendum vitae. Nullam quis lectus imperdiet orci elementum fringilla. Etiam efficitur lectus quis iaculis molestie. Pellentesque bibendum pharetra imperdiet. Maecenas aliquet, est ut vestibulum commodo, lorem purus dapibus nisl, eu lacinia velit ex quis sapien. Vivamus tincidunt magna in eleifend malesuada.
</p>
<p>
Morbi ut quam vel ligula mollis efficitur ut eu turpis. Praesent elementum turpis et faucibus sollicitudin. Duis interdum massa in ornare ullamcorper. Duis ultrices imperdiet rhoncus. Cras nec cursus metus. Sed fermentum nibh lorem, nec tincidunt nisl sollicitudin nec. Nulla at velit ex. Morbi suscipit, augue eget faucibus tempor, sem lorem gravida sem, eget luctus urna metus laoreet lectus. Aliquam massa dolor, dapibus vel nulla id, iaculis pellentesque ligula. Curabitur at pharetra massa.
</p>
<h2 id="chap2">Chap 2</h2>
<p>
Fusce tempus justo dolor, sed efficitur nisl aliquet sed. Nullam ac diam a nisl porta viverra vel id purus. Vestibulum consectetur purus eget blandit hendrerit. Fusce nibh mauris, condimentum vel arcu sit amet, tristique finibus elit. Nam arcu magna, sollicitudin sed massa a, tincidunt suscipit nisi. Quisque sollicitudin lacus nec leo commodo lacinia. Praesent vehicula fermentum erat quis pellentesque. Aliquam diam ex, rhoncus et ornare eget, luctus aliquet eros. Proin luctus ante ac lectus pharetra rhoncus sed nec lacus.
</p>
<p>
Nam blandit hendrerit risus a consequat. Vivamus ornare placerat mauris et tincidunt. Suspendisse tempus aliquam mattis. Donec varius nisi arcu, vel bibendum eros varius eu. Donec rutrum, purus eu consequat ultricies, ligula felis lobortis lorem, at tincidunt ligula augue ut ipsum. Donec laoreet, mauris eget iaculis eleifend, mauris dolor imperdiet ante, faucibus mattis purus orci at erat. Suspendisse ut sapien justo. Suspendisse potenti. Etiam ornare justo in neque vehicula elementum. Proin commodo fermentum sapien et semper.
</p>
<p>
Sed consectetur sed lacus id fringilla. Nullam a neque aliquam, euismod quam in, varius erat. Donec suscipit nisi vel augue euismod interdum. Vestibulum placerat vel felis sed rhoncus. Aenean massa tortor, tincidunt quis euismod sed, imperdiet at ipsum. Praesent vel orci placerat, varius erat vel, eleifend mauris. Sed nec consequat lorem. Ut erat mi, ultricies ac odio in, faucibus mattis urna. Mauris et cursus metus. Proin semper tortor vitae fermentum ornare. Vestibulum iaculis risus eu ligula dapibus, a suscipit elit rutrum. Nunc imperdiet nisl sem, id elementum nisi cursus a. Suspendisse in pharetra quam. Aenean eu dictum enim.
</p>
<h2 id="chap3">Chap 3</h2>
<p>
Mauris non magna eu nisi finibus sodales in vitae neque. Duis volutpat nec libero et mattis. Sed turpis urna, sodales at faucibus id, consequat vehicula diam. Aenean vulputate nisi vel laoreet mollis. Fusce imperdiet facilisis neque. Phasellus hendrerit posuere velit sed suscipit. Morbi eget blandit mauris. Quisque convallis quis velit sit amet placerat. Vestibulum ut leo bibendum, rutrum mi non, vulputate nibh. Praesent vitae viverra orci, at imperdiet nisl.
</p>
<p>
In a tincidunt sem. Fusce interdum metus ut bibendum congue. Suspendisse a erat leo. Vivamus efficitur ac neque eget luctus. Nunc aliquam eleifend eros a dignissim. Aliquam congue id justo sed finibus. Praesent finibus pretium malesuada. Mauris malesuada at lectus sit amet mattis. Quisque feugiat libero id erat gravida, sit amet euismod est gravida.
</p>
<p>
Phasellus lacus augue, pellentesque sit amet ullamcorper ut, tristique ac mi. Sed malesuada tempus felis vulputate faucibus. Proin sit amet sapien et quam ornare porttitor. Ut vitae pretium metus, sed aliquam metus. Aliquam pretium luctus ex. In viverra nibh a felis elementum, at euismod nisl aliquam. Maecenas volutpat ante ac molestie fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed sodales condimentum lacus. Vivamus tempus ante justo, eget venenatis mauris vulputate quis. Curabitur leo nunc, finibus consectetur diam eget, dignissim bibendum dui. In vehicula varius mi, quis condimentum velit rutrum et. Nunc in pulvinar arcu.
</p>
<p>
Etiam cursus erat eros, at gravida augue lacinia ut. Fusce odio lorem, fringilla sed aliquam vel, consequat feugiat lectus. Morbi sollicitudin lacus sed erat tempus, non finibus nunc aliquam. Donec a pulvinar metus, id scelerisque lectus. Aliquam erat volutpat. Nam id ligula sed urna dignissim congue. Fusce ut varius tellus. Integer vel rhoncus tellus.
</p>
<p>
Mauris consectetur magna sit amet metus placerat, consequat ullamcorper mi pellentesque. Pellentesque et velit dui. Nunc felis erat, rutrum in velit ac, luctus molestie nunc. Morbi sed consequat nibh, vitae iaculis lacus. Pellentesque eget consectetur libero. In sit amet luctus mi. Proin quis interdum elit. Praesent ante elit, porta a orci a, suscipit eleifend velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi facilisis lectus facilisis magna commodo scelerisque. Nunc et volutpat libero, sed eleifend dolor. Vestibulum pellentesque auctor ex sagittis consequat. Aenean sodales ultrices ante eget dignissim. Sed ornare aliquet massa non pulvinar.
</p>
<p>
Sed fermentum massa in dui volutpat dignissim. Nunc at neque vel dui aliquam elementum. Morbi varius laoreet arcu, vel lobortis enim faucibus vitae. Morbi nec lorem tempor, luctus enim sed, imperdiet sem. Nam quis dui feugiat nibh tincidunt rhoncus. Integer tincidunt nec ipsum tristique imperdiet. Fusce ornare tellus purus, ac condimentum elit varius et. Nullam nec purus at mauris aliquam cursus. Sed vitae sapien ac nulla porttitor mattis euismod sed justo. Aenean vulputate sagittis libero, nec mattis sapien ultrices vel.
</p>
<h2 id="chap4">Chap 4</h2>
<p>
Maecenas dignissim dui in risus posuere, auctor tincidunt turpis efficitur. Curabitur eu purus id massa tempus fringilla. Sed eu neque tincidunt, pulvinar mi id, luctus orci. Etiam gravida purus nibh, sed faucibus sem bibendum et. Sed finibus rhoncus sapien sed tempor. Quisque mattis nibh tellus, sit amet placerat justo varius nec. Cras ut suscipit sapien. Sed blandit leo massa, at ornare turpis condimentum et. Sed in velit quis erat aliquet rutrum. Mauris eu enim nec diam aliquet iaculis. Aenean blandit dui porttitor tincidunt iaculis. Sed ullamcorper arcu vel nulla laoreet, nec egestas magna semper.
</p>
<p>
Quisque a dui vitae felis aliquam ornare. Morbi nec faucibus erat, eu blandit libero. Pellentesque in justo odio. In hac habitasse platea dictumst. Phasellus auctor, quam eget rhoncus malesuada, arcu nibh auctor eros, vitae sodales sem ante et enim. Quisque sit amet feugiat metus, non aliquam dui. Sed congue varius ipsum a semper. Quisque arcu nibh, sagittis vel faucibus id, imperdiet id libero. Mauris ut purus sed est vehicula pretium. Nam consectetur odio ut mauris convallis faucibus. Nunc in consectetur lacus. Phasellus semper lorem ac quam tincidunt aliquet. Mauris non odio vestibulum, varius sem eleifend, mollis lectus.
</p>
<p>
Integer vitae turpis enim. Nunc ac lobortis est, in elementum metus. Morbi a laoreet dolor. Nulla varius, tortor at cursus porttitor, erat dui volutpat turpis, vitae rhoncus justo risus tincidunt nulla. Integer rhoncus purus id dolor sollicitudin, a auctor leo aliquam. In scelerisque sem sed enim vulputate condimentum. Pellentesque auctor ullamcorper nibh, eget bibendum nisl venenatis at. Donec a lectus posuere, ultrices nisi quis, consequat purus. Morbi sed volutpat nulla. Aliquam et dolor ullamcorper, tempus turpis quis, fermentum nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris velit turpis, porttitor aliquam auctor sit amet, facilisis sed nulla.
Integer vitae turpis enim. Nunc ac lobortis est, in elementum metus. Morbi a laoreet dolor. Nulla varius, tortor at cursus porttitor, erat dui volutpat turpis, vitae rhoncus justo risus tincidunt nulla. Integer rhoncus purus id dolor sollicitudin, a auctor leo aliquam. In scelerisque sem sed enim vulputate condimentum. Pellentesque auctor ullamcorper nibh, eget bibendum nisl venenatis at. Donec a lectus posuere, ultrices nisi quis, consequat purus. Morbi sed volutpat nulla. Aliquam et dolor ullamcorper, tempus turpis quis, fermentum nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris velit turpis, porttitor aliquam auctor sit amet, facilisis sed nulla.
</p>
</div>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var chap1_y = $('#chap1').offset().top;
var chap2_y = $('#chap2').offset().top;
var chap3_y = $('#chap3').offset().top;
var chap4_y = $('#chap4').offset().top;
var buffer = 100;
$(window).scroll(function(event){
var winPos = $(window).scrollTop();
$('#link1').removeClass('scrolling');
$('#link2').removeClass('scrolling');
$('#link3').removeClass('scrolling');
$('#link4').removeClass('scrolling');
if(winPos>=(chap4_y-buffer)){
$('#link4').addClass('scrolling');
}else if(winPos>=(chap3_y-buffer)){
$('#link3').addClass('scrolling');
}else if(winPos>=(chap2_y-buffer)){
$('#link2').addClass('scrolling');
}else if(winPos>=(chap1_y-buffer)){
$('#link1').addClass('scrolling');
}
});
$('#link1').click(function(event){
$('html,body').animate({scrollTop:(chap1_y)+'px'}, 800);
});
$('#link2').click(function(event){
$('html,body').animate({scrollTop:(chap2_y)+'px'}, 800);
});
$('#link3').click(function(event){
$('html,body').animate({scrollTop:(chap3_y)+'px'}, 800);
});
$('#link4').click(function(event){
$('html,body').animate({scrollTop:(chap4_y)+'px'}, 800);
});
});
</script>
</body>
</html>
