I have a divider where I have a large amount of text. I would like to track how far a user has scrolled through this element. I have a function where I can track how far the user has scrolled from the top of the page, this is not what I am trying to achieve. I am only looking to track the specific scroll value while scrolling through a div by class. I was thinking a good way to do this was to find out how far this element is from the top of the page on load, then adding this to the value of how far the user has scrolled down the page. Bare in mind with this example there is only one element before the section I would like to track, in reality, there are many. Furthermore sure I could just say well at 300px I will then get to this section, however with regards to responsivity this is not practical as it will always be changing. So ideally if there was a way to onload measure how far '.show-back' is from the top of the page would be amazing.
$(document).ready(function(){
$(window).scroll(function(){
var wScroll = $(this).scrollTop();
console.log(wScroll);
});
});
.another-element {
height: 300px;
width: 100%;
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="another-element">
</div>
<div class="show-back">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque blandit purus cursus, sodales tortor vestibulum, fermentum purus. Donec vel venenatis augue. Fusce malesuada cursus ornare. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec et leo ac ex ultricies elementum sit amet non arcu. Etiam quis magna odio. Nam quis nibh elementum, tincidunt felis vitae, tincidunt lorem. Nam ac diam et nisl facilisis ornare. In eget dui vel quam interdum consectetur non sit amet urna. In hac habitasse platea dictumst. Pellentesque a elit id lacus hendrerit vestibulum ac in ligula. Cras hendrerit neque sit amet pretium sodales. Praesent consectetur odio vitae est bibendum, nec gravida elit vehicula. Ut quis odio vitae mi dictum iaculis quis vel ipsum. Nam suscipit aliquam sollicitudin.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque blandit purus cursus, sodales tortor vestibulum, fermentum purus. Donec vel venenatis augue. Fusce malesuada cursus ornare. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec et leo ac ex ultricies elementum sit amet non arcu. Etiam quis magna odio. Nam quis nibh elementum, tincidunt felis vitae, tincidunt lorem. Nam ac diam et nisl facilisis ornare. In eget dui vel quam interdum consectetur non sit amet urna. In hac habitasse platea dictumst. Pellentesque a elit id lacus hendrerit vestibulum ac in ligula. Cras hendrerit neque sit amet pretium sodales. Praesent consectetur odio vitae est bibendum, nec gravida elit vehicula. Ut quis odio vitae mi dictum iaculis quis vel ipsum. Nam suscipit aliquam sollicitudin.
</div>
var desc = document.querySelectorAll(".desc");
function change() {
var how = desc.length;
for(var i = 0; i < how; i++) {
desc[i].getElementsByTagName("p")[1].style.display = "none";
}
}
change();
function show(e) {
var target = e.target;
console.log(target);
}
for(var i = 0; i < desc.length; i++) {
desc[i].onclick = show;
}
.desc {
width: 80%;
margin: 0 auto;
border: 3px solid #cccccc;
padding: 5px;
margin-bottom: 10px;
}
<div class="desc">
<p>Pytanie: Dlaczego JavaScript jest taki fajny ?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus tortor lectus, in pellentesque sapien viverra eget. Ut maximus magna vitae mollis fringilla. In sit amet odio tincidunt, finibus arcu et, ullamcorper nisi. Nunc congue ut augue quis viverra. Donec sagittis, felis et bibendum condimentum, est ligula tempus quam, vel hendrerit tortor ipsum id enim. Mauris nisl ante, convallis sit amet orci a, blandit pellentesque mauris. Etiam sed elementum ipsum. Nullam consequat risus augue, nec ullamcorper massa varius eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eget sem in purus hendrerit aliquam. Vivamus at consequat tellus. Cras et eros mauris.</p>
</div>
<div class="desc">
<p>Pytanie: Dlaczego JavaScript jest taki fajny ?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus tortor lectus, in pellentesque sapien viverra eget. Ut maximus magna vitae mollis fringilla. In sit amet odio tincidunt, finibus arcu et, ullamcorper nisi. Nunc congue ut augue quis viverra. Donec sagittis, felis et bibendum condimentum, est ligula tempus quam, vel hendrerit tortor ipsum id enim. Mauris nisl ante, convallis sit amet orci a, blandit pellentesque mauris. Etiam sed elementum ipsum. Nullam consequat risus augue, nec ullamcorper massa varius eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eget sem in purus hendrerit aliquam. Vivamus at consequat tellus. Cras et eros mauris.</p>
</div>
<div class="desc">
<p>Pytanie: Dlaczego JavaScript jest taki fajny ?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus tortor lectus, in pellentesque sapien viverra eget. Ut maximus magna vitae mollis fringilla. In sit amet odio tincidunt, finibus arcu et, ullamcorper nisi. Nunc congue ut augue quis viverra. Donec sagittis, felis et bibendum condimentum, est ligula tempus quam, vel hendrerit tortor ipsum id enim. Mauris nisl ante, convallis sit amet orci a, blandit pellentesque mauris. Etiam sed elementum ipsum. Nullam consequat risus augue, nec ullamcorper massa varius eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eget sem in purus hendrerit aliquam. Vivamus at consequat tellus. Cras et eros mauris.</p>
</div>
I have problem: I get the target but I don't want a paragraph, but div with class .desc. And then I want to refer to this target and choose children. How I can do it? So, when someone clicks in this this or the text inside this div, I want to get in target only this div with class desc.
Even if you have set the onclick event for the <div> element you actually trigger the onclick event in the child <p> element, please see this answer https://stackoverflow.com/a/13966749/3029422
Depending on your implementation needs you can either stop the event propagation or just get the parent node.
Change your target variable to var target = e.target.parentNode; in order to have a reference to the <div> element:
var desc = document.querySelectorAll(".desc");
function change() {
var how = desc.length;
for (var i = 0; i < how; i++) {
desc[i].getElementsByTagName("p")[1].style.display = "none";
}
}
change();
function show(e) {
var target = e.target.parentNode;
console.log(target);
}
for (var i = 0; i < desc.length; i++) {
desc[i].onclick = show;
}
.desc {
width: 80%;
margin: 0 auto;
border: 3px solid #cccccc;
padding: 5px;
margin-bottom: 10px;
}
<div class="desc">
<p>Pytanie: Dlaczego JavaScript jest taki fajny ?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus tortor lectus, in pellentesque sapien viverra eget. Ut maximus magna vitae mollis fringilla. In sit amet odio tincidunt, finibus arcu et, ullamcorper nisi. Nunc congue ut augue quis
viverra. Donec sagittis, felis et bibendum condimentum, est ligula tempus quam, vel hendrerit tortor ipsum id enim. Mauris nisl ante, convallis sit amet orci a, blandit pellentesque mauris. Etiam sed elementum ipsum. Nullam consequat risus augue,
nec ullamcorper massa varius eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eget sem in purus hendrerit aliquam. Vivamus at consequat tellus. Cras et eros mauris.</p>
</div>
<div class="desc">
<p>Pytanie: Dlaczego JavaScript jest taki fajny ?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus tortor lectus, in pellentesque sapien viverra eget. Ut maximus magna vitae mollis fringilla. In sit amet odio tincidunt, finibus arcu et, ullamcorper nisi. Nunc congue ut augue quis
viverra. Donec sagittis, felis et bibendum condimentum, est ligula tempus quam, vel hendrerit tortor ipsum id enim. Mauris nisl ante, convallis sit amet orci a, blandit pellentesque mauris. Etiam sed elementum ipsum. Nullam consequat risus augue,
nec ullamcorper massa varius eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eget sem in purus hendrerit aliquam. Vivamus at consequat tellus. Cras et eros mauris.</p>
</div>
<div class="desc">
<p>Pytanie: Dlaczego JavaScript jest taki fajny ?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dapibus tortor lectus, in pellentesque sapien viverra eget. Ut maximus magna vitae mollis fringilla. In sit amet odio tincidunt, finibus arcu et, ullamcorper nisi. Nunc congue ut augue quis
viverra. Donec sagittis, felis et bibendum condimentum, est ligula tempus quam, vel hendrerit tortor ipsum id enim. Mauris nisl ante, convallis sit amet orci a, blandit pellentesque mauris. Etiam sed elementum ipsum. Nullam consequat risus augue,
nec ullamcorper massa varius eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed eget sem in purus hendrerit aliquam. Vivamus at consequat tellus. Cras et eros mauris.</p>
</div>
This question already has an answer here:
Why do child divs extend beyond their parent div?
(1 answer)
Closed 6 years ago.
I'm trying to create a custom scroller, and I'm using translate3d to scroll. The only problem is, when you scroll all the way to the bottom, the thumb (scroller) goes too far down. I'm using the accepted formula, but for some reason, it goes past its parent wrapper. Here's the formula:
scrollPosition * scrollBarThumb_height / content_height
What am I doing wrong, and how can I get the thumb to fully stay in its parents view?
JSFiddle
console.clear();
var innerWrapper = document.getElementById('innerWrapper');
var scrollBar = document.getElementById('scrollbar');
var scrollBarThumb = scrollBar.firstElementChild
scrollBarThumb.style.height = (innerWrapper.offsetHeight * innerWrapper.offsetHeight / innerWrapper.scrollHeight) + 'px';
innerWrapper.addEventListener('mousewheel', handleScroll);
innerWrapper.addEventListener('DOMMouseScroll', handleScroll);
innerWrapper.style.transform = 'translate3d(0px, 0px, 0px)';
function handleScroll(e) {
// Prevent parents from scrolling
e.preventDefault();
var direction = (e.detail < 0 || e.wheelDelta > 0) ? 1 : -1; // 1 = scroll down, -1 = scroll
var start = parseInt(innerWrapper.style.transform.split(',')[1], 10);
var scrollPosition = start + direction * 100; // Cannot use `deltaY`, because not all browsers support it.
var scrolledToBottom = innerWrapper.scrollHeight - innerWrapper.parentElement.offsetHeight;
scrollPosition = clamp(scrollPosition, -scrolledToBottom, 0);
innerWrapper.style.transform = 'translate3d(0px, ' + scrollPosition + 'px, 0px)';
scrollBarThumb.style.top = -(scrollPosition * scrollBarThumb.offsetHeight / innerWrapper.parentElement.offsetHeight) + 'px'
}
function clamp(val, min, max) {
if (typeof min !== 'number') min = 0;
if (typeof max !== 'number') max = 1;
return Math.min(Math.max(val, min), max);
}
#outerWrapper {
height: 400px;
overflow: hidden;
display: flex;
}
#content {
background-image: url("http://images.freeimages.com/images/premium/previews/3037/30376024-beautiful-flower-portrait.jpg");
width: 400px;
}
#scrollbar {
height: 100%;
width: 50px;
background-color: orange;
}
#scrollbar_thumb {
background-color: yellow;
border: 2px solid blue;
position: relative;
}
<div id="outerWrapper">
<div id="innerWrapper">
<div id="content">
Lorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero
sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum vitae. Lacinia dui cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus
Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum vitae. Lacinia dui scelerisque Sed convallis nonummy orci Vestibulum orci tempusLorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus
enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar
justo neque dui ipsum vitae. Lacinia dui scelerisque Sed convallis nonummy orci Vestibulum orci tempusLorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames
ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum vitae. Lacinia dui scelerisque
Sed convallis nonummy orci Vestibulum orci tempusLorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem
lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor Lorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie
vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum
vitae. Lacinia dui scelerisque Sed convallis nonummy orci Vestibulum orci tempusLorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque
Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum vitae. Lacinia dui scelerisque Sed convallis nonummy orci
Vestibulum orci tempusLorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque Vestibulum justo sem lorem neque accumsan nulla.
Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum vitae. Lacinia dui scelerisque Sed convallis nonummy orci Vestibulum orci tempusLorem ipsum dolor sit amet
consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor pulvinar justo neque dui ipsum
vitae. Lacinia dui scelerisque Sed convallis nonummy orci Vestibulum orci tempusLorem ipsum dolor sit amet consectetuer laoreet faucibus id ut et. Consequat Ut tellus enim ante nulla molestie vitae sem interdum turpis. Fames ridiculus cursus pellentesque
Vestibulum justo sem lorem neque accumsan nulla. Lacinia Suspendisse vitae libero sem et laoreet risus Sed condimentum Cras. Nunc massa mauris tempor dolor
</div>
</div>
<div id="scrollbar">
<div id="scrollbar_thumb"></div>
</div>
</div>
The borders were not calculated properly into the total element's height, thus creating the problem.
Simply add box-sizing: border-box; to solve the issue:
#scrollbar_thumb {
...
box-sizing: border-box;
}
working JSFiddle fork: https://jsfiddle.net/azizn/9nfns6kk/
I've been playing around with this for some time but couldn't manage to get it working or find a similar question here.
Here is the fiddle.
We have an affixed side navigation containing a variable number of links. When the number of links get big, the side-nav goes beyond the available height. I would like to clip it off vertically based on available height (excluding the footer when it is in the view). I mean a scroll-bar should appear when the items are clipped.
Has anyone worked on a similar issue? I would really appreciate if you share your experience. And please let me know if it's not a reasonable design :)
I include some code here to make s.o. happy:
HTML:
<!-- Main Content -->
<div id="main-content" class="col-xs-9">
<h2>Heading<a id="1"></a></h2>
<p>Lorem ipsum ...</p>
<h2>Heading<a id="2"></a></h2>
<p>Lorem ipsum ...</p>
</div>
<!-- Sidebar -->
<div id="sidebar" class="col-xs-3">
<div id="sidenav" role="navigation">
<h3>Contents</h3>
<ul class="nav nav-pills nav-stacked">
<li><a class="list-group-item" href="#1">Heading</a></li>
<li><a class="list-group-item" href="#2">Heading</a></li>
</ul>
</div>
</div>
JS:
// activate scrollspy and affix for sidenav
$('body').scrollspy({ target: '#sidenav' });
$('#sidenav').affix({
offset: {
top: 165
}
})
CSS:
#sidenav.affix {
top: 50px;
z-index: 1;
width: 212.5px;
}
#sidenav {
margin-bottom: 20px;
}
Tricky because the element is position fixed. Try modifying your .affix class:
#sidenav.affix {
top: 50px;
z-index: 1;
width: 212.5px;
bottom: 0; /* <-- add */
overflow: auto; /* <-- add */
}
Example:
/* Latest compiled and minified JavaScript included as External Resource */
// activate scrollspy and affix for sidenav
$('body').scrollspy({
target: '#sidenav'
});
$('#sidenav').affix({
offset: {
top: 165
}
})
// smooth scrolling
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 800);
return false;
}
}
});
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
html,
body {
height: 100%;
}
body {
padding-top: 50px;
}
footer {
margin: 50px 0;
}
h2 {
margin-top: 60px;
}
/* side navigation */
/* media queries that make the side nav position static have been removed for easier editing in jsfiddle */
#sidenav.affix {
top: 50px;
z-index: 1;
width: 212.5px;
bottom: 0;
overflow: auto;
}
#sidenav {
margin-bottom: 20px;
}
.nav-stacked>li+li {
margin-top: 0;
}
.nav-stacked>li>a {
border-radius: 0 !important;
margin-top: -1px;
}
.nav-stacked>li:first-child>a {
border-top-left-radius: 4px !important;
border-top-right-radius: 4px !important;
}
.nav-stacked>li:last-child>a {
margin-bottom: 0 !important;
border-bottom-right-radius: 4px !important;
border-bottom-left-radius: 4px !important;
}
/* fix problem with anchors going behind top navbar */
#main-content h2 a {
display: block;
position: relative;
top: -100px;
}
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<!-- Side-nav comes after the main content -->
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<a class="navbar-brand" href="index.html">We have a nav bar also!</a>
</div>
</nav>
<!-- Page Content -->
<div class="container">
<!-- Page Heading/Breadcrumbs -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Test Page
</h1>
<ol class="breadcrumb">
<li>Home
</li>
<li class="active">Test Page</li>
</ol>
</div>
</div>
<!-- /.row -->
<!-- Content Row -->
<div class="row">
<div class="col-lg-12">
<!-- Main Content -->
<div id="main-content" class="col-xs-9">
<h2>Heading<a id="1"></a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
<h2>Heading<a id="2"></a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
<h2>Heading<a id="3"></a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
<h2>Heading<a id="4"></a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
<h2>Heading<a id="5"></a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
<h2>Heading<a id="6"></a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
<h2>Heading<a id="7"></a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
<h2>Heading<a id="8"></a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
<h2>Heading<a id="9"></a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
<h2>Heading<a id="10"></a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
<h2>Heading<a id="11"></a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
<h2>Heading<a id="12"></a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
<h2>Heading<a id="13"></a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
<h2>Heading<a id="14"></a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
<h2>Heading<a id="15"></a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
<h2>Heading<a id="16"></a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
<h2>Heading<a id="17"></a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
<h2>Heading<a id="18"></a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
<h2>Heading<a id="19"></a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
<h2>Heading<a id="20"></a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
</div>
<!-- /.col-md-9 -->
<!-- Sidebar -->
<div id="sidebar" class="col-xs-3">
<div id="sidenav" role="navigation">
<h3>Contents</h3>
<ul class="nav nav-pills nav-stacked">
<li><a class="list-group-item" href="#1">Heading</a>
</li>
<li><a class="list-group-item" href="#2">Heading</a>
</li>
<li><a class="list-group-item" href="#3">Heading</a>
</li>
<li><a class="list-group-item" href="#4">Heading</a>
</li>
<li><a class="list-group-item" href="#5">Heading</a>
</li>
<li><a class="list-group-item" href="#6">Heading</a>
</li>
<li><a class="list-group-item" href="#7">Heading</a>
</li>
<li><a class="list-group-item" href="#8">Heading</a>
</li>
<li><a class="list-group-item" href="#9">Heading</a>
</li>
<li><a class="list-group-item" href="#10">Heading</a>
</li>
<li><a class="list-group-item" href="#11">Heading</a>
</li>
<li><a class="list-group-item" href="#12">Heading</a>
</li>
<li><a class="list-group-item" href="#13">Heading</a>
</li>
<li><a class="list-group-item" href="#14">Heading</a>
</li>
<li><a class="list-group-item" href="#15">Heading</a>
</li>
<li><a class="list-group-item" href="#16">Heading</a>
</li>
<li><a class="list-group-item" href="#17">Heading</a>
</li>
<li><a class="list-group-item" href="#18">Heading</a>
</li>
<li><a class="list-group-item" href="#19">Heading</a>
</li>
<li><a class="list-group-item" href="#20">Heading</a>
</li>
</ul>
</div>
</div>
<!-- /.col-md-3 -->
</div>
</div>
<!-- /.row -->
<hr>
<!-- Footer -->
<footer id="footer">
<div class="row">
<div class="col-lg-12">
<p>Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer
Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer</p>
</div>
</div>
</footer>
</div>