<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
footer {
height: 500px;
width: 100%;
background: red;
position: relative;
z-index: 9999999;
}
.side-bar {
position: fixed;
top: 60px;
z-index: 2;
width: 300px;
left: 0;
/*overflow-y: auto;*/
background: grey;
height: 100%;
}
.side-bar-content {
height: 100%;
position: absolute;
right: 0;
top: 0;
width: 237px;
z-index: 5;
overflow-y: auto;
padding-bottom: 65px;
}
.main-content {
position: relative;
}
.container {
box-sizing: border-box;
}
</style>
<body style="height:1500px">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
<div class="main-content">
<div class="side-bar">
<div class="side-bar-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc arcu urna, pellentesque interdum luctus quis, ornare vel diam. Etiam volutpat nunc quis metus vulputate pulvinar. Proin in tortor quam. Nam et efficitur tortor. Curabitur ornare commodo ligula, sed laoreet metus fermentum eget. Curabitur ac sem nisl. Phasellus pharetra enim euismod ligula condimentum pellentesque. Sed sed ornare felis.
Suspendisse vel feugiat orci. Mauris dolor turpis, semper finibus risus nec, cursus dignissim leo. Cras imperdiet nunc a accumsan dignissim. Donec quis mauris ac est vehicula scelerisque. Phasellus molestie sem vel varius elementum. In purus velit, pretium non magna et, posuere luctus est. Sed laoreet interdum lacus, in varius urna egestas eu. Aenean nisl orci, iaculis at lobortis in, condimentum sed neque. Pellentesque faucibus tristique placerat. Donec nec nulla ligula. Ut sed semper ipsum, vitae tristique odio.
Nullam interdum efficitur justo sit amet varius. Pellentesque blandit, eros in fringilla tincidunt, leo lectus venenatis urna, vel scelerisque quam odio lobortis augue. Etiam a sapien sollicitudin, dapibus felis ut, dapibus arcu. Phasellus eget interdum erat. Fusce pulvinar eros non ante cursus, et tristique felis rutrum. Phasellus malesuada sagittis interdum. Suspendisse pharetra ligula vel magna porttitor, ac convallis leo aliquet. Duis dui sapien, dapibus ac mi sit amet, ornare consequat mauris. Cras blandit suscipit nulla tristique convallis. Donec et ullamcorper diam. Nullam quis augue ex. Morbi tempus velit tortor. Morbi lacinia sit amet nulla ac rhoncus. Morbi feugiat, tellus vitae efficitur sodales, mauris nisi feugiat sapien, in dapibus ante leo non sem. Nullam rutrum neque nec nibh malesuada dignissim. Donec rutrum malesuada lacus eget rhoncus.
Ut aliquam augue felis, non consequat orci accumsan at. Maecenas nec tortor sit amet arcu porttitor consectetur. Mauris eu felis velit. Mauris vulputate tellus mollis eleifend efficitur. Praesent tempus mollis iaculis. Phasellus bibendum auctor tellus. Aliquam quis tellus non mauris fringilla dapibus. Etiam at leo accumsan, sollicitudin mauris tincidunt, venenatis nisl. Curabitur eget tempor tortor. Quisque vitae vestibulum lacus. Aliquam erat volutpat. Cras at neque mi. Proin maximus sem vitae ante suscipit viverra.
In efficitur varius enim a bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id nisl eget tellus feugiat aliquet at sed nunc. Maecenas sed libero velit. Phasellus aliquam ornare massa suscipit placerat. Fusce faucibus laoreet velit et varius. Cras quis nisi velit. Fusce vel sapien at neque molestie bibendum posuere lacinia mi. Sed vulputate, est ac finibus mattis, ligula elit varius ligula, in dictum lacus arcu id erat. Suspendisse vestibulum neque sed sagittis molestie. Vestibulum interdum sapien ut nulla pharetra, ac vulputate velit consectetur. Maecenas magna mauris, rutrum ut blandit eu, accumsan at lectus. Praesent eget pharetra massa. Praesent ante metus, dapibus eget lorem nec, porttitor porta sem.
</p>
<h3>sdjgfpsjpogdfjhup</h3>
</div>
</div>
<div class="container" style="margin-top:50px">
<h3>Fixed Navbar</h3>
<div class="row">
<div class="col-md-12">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc arcu urna, pellentesque interdum luctus quis, ornare vel diam. Etiam volutpat nunc quis metus vulputate pulvinar. Proin in tortor quam. Nam et efficitur tortor. Curabitur ornare commodo ligula, sed laoreet metus fermentum eget. Curabitur ac sem nisl. Phasellus pharetra enim euismod ligula condimentum pellentesque. Sed sed ornare felis.
Suspendisse vel feugiat orci. Mauris dolor turpis, semper finibus risus nec, cursus dignissim leo. Cras imperdiet nunc a accumsan dignissim. Donec quis mauris ac est vehicula scelerisque. Phasellus molestie sem vel varius elementum. In purus velit, pretium non magna et, posuere luctus est. Sed laoreet interdum lacus, in varius urna egestas eu. Aenean nisl orci, iaculis at lobortis in, condimentum sed neque. Pellentesque faucibus tristique placerat. Donec nec nulla ligula. Ut sed semper ipsum, vitae tristique odio.
Nullam interdum efficitur justo sit amet varius. Pellentesque blandit, eros in fringilla tincidunt, leo lectus venenatis urna, vel scelerisque quam odio lobortis augue. Etiam a sapien sollicitudin, dapibus felis ut, dapibus arcu. Phasellus eget interdum erat. Fusce pulvinar eros non ante cursus, et tristique felis rutrum. Phasellus malesuada sagittis interdum. Suspendisse pharetra ligula vel magna porttitor, ac convallis leo aliquet. Duis dui sapien, dapibus ac mi sit amet, ornare consequat mauris. Cras blandit suscipit nulla tristique convallis. Donec et ullamcorper diam. Nullam quis augue ex. Morbi tempus velit tortor. Morbi lacinia sit amet nulla ac rhoncus. Morbi feugiat, tellus vitae efficitur sodales, mauris nisi feugiat sapien, in dapibus ante leo non sem. Nullam rutrum neque nec nibh malesuada dignissim. Donec rutrum malesuada lacus eget rhoncus.
Ut aliquam augue felis, non consequat orci accumsan at. Maecenas nec tortor sit amet arcu porttitor consectetur. Mauris eu felis velit. Mauris vulputate tellus mollis eleifend efficitur. Praesent tempus mollis iaculis. Phasellus bibendum auctor tellus. Aliquam quis tellus non mauris fringilla dapibus. Etiam at leo accumsan, sollicitudin mauris tincidunt, venenatis nisl. Curabitur eget tempor tortor. Quisque vitae vestibulum lacus. Aliquam erat volutpat. Cras at neque mi. Proin maximus sem vitae ante suscipit viverra.
In efficitur varius enim a bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id nisl eget tellus feugiat aliquet at sed nunc. Maecenas sed libero velit. Phasellus aliquam ornare massa suscipit placerat. Fusce faucibus laoreet velit et varius. Cras quis nisi velit. Fusce vel sapien at neque molestie bibendum posuere lacinia mi. Sed vulputate, est ac finibus mattis, ligula elit varius ligula, in dictum lacus arcu id erat. Suspendisse vestibulum neque sed sagittis molestie. Vestibulum interdum sapien ut nulla pharetra, ac vulputate velit consectetur. Maecenas magna mauris, rutrum ut blandit eu, accumsan at lectus. Praesent eget pharetra massa. Praesent ante metus, dapibus eget lorem nec, porttitor porta sem.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc arcu urna, pellentesque interdum luctus quis, ornare vel diam. Etiam volutpat nunc quis metus vulputate pulvinar. Proin in tortor quam. Nam et efficitur tortor. Curabitur ornare commodo ligula, sed laoreet metus fermentum eget. Curabitur ac sem nisl. Phasellus pharetra enim euismod ligula condimentum pellentesque. Sed sed ornare felis.
Suspendisse vel feugiat orci. Mauris dolor turpis, semper finibus risus nec, cursus dignissim leo. Cras imperdiet nunc a accumsan dignissim. Donec quis mauris ac est vehicula scelerisque. Phasellus molestie sem vel varius elementum. In purus velit, pretium non magna et, posuere luctus est. Sed laoreet interdum lacus, in varius urna egestas eu. Aenean nisl orci, iaculis at lobortis in, condimentum sed neque. Pellentesque faucibus tristique placerat. Donec nec nulla ligula. Ut sed semper ipsum, vitae tristique odio.
Nullam interdum efficitur justo sit amet varius. Pellentesque blandit, eros in fringilla tincidunt, leo lectus venenatis urna, vel scelerisque quam odio lobortis augue. Etiam a sapien sollicitudin, dapibus felis ut, dapibus arcu. Phasellus eget interdum erat. Fusce pulvinar eros non ante cursus, et tristique felis rutrum. Phasellus malesuada sagittis interdum. Suspendisse pharetra ligula vel magna porttitor, ac convallis leo aliquet. Duis dui sapien, dapibus ac mi sit amet, ornare consequat mauris. Cras blandit suscipit nulla tristique convallis. Donec et ullamcorper diam. Nullam quis augue ex. Morbi tempus velit tortor. Morbi lacinia sit amet nulla ac rhoncus. Morbi feugiat, tellus vitae efficitur sodales, mauris nisi feugiat sapien, in dapibus ante leo non sem. Nullam rutrum neque nec nibh malesuada dignissim. Donec rutrum malesuada lacus eget rhoncus.
Ut aliquam augue felis, non consequat orci accumsan at. Maecenas nec tortor sit amet arcu porttitor consectetur. Mauris eu felis velit. Mauris vulputate tellus mollis eleifend efficitur. Praesent tempus mollis iaculis. Phasellus bibendum auctor tellus. Aliquam quis tellus non mauris fringilla dapibus. Etiam at leo accumsan, sollicitudin mauris tincidunt, venenatis nisl. Curabitur eget tempor tortor. Quisque vitae vestibulum lacus. Aliquam erat volutpat. Cras at neque mi. Proin maximus sem vitae ante suscipit viverra.
In efficitur varius enim a bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id nisl eget tellus feugiat aliquet at sed nunc. Maecenas sed libero velit. Phasellus aliquam ornare massa suscipit placerat. Fusce faucibus laoreet velit et varius. Cras quis nisi velit. Fusce vel sapien at neque molestie bibendum posuere lacinia mi. Sed vulputate, est ac finibus mattis, ligula elit varius ligula, in dictum lacus arcu id erat. Suspendisse vestibulum neque sed sagittis molestie. Vestibulum interdum sapien ut nulla pharetra, ac vulputate velit consectetur. Maecenas magna mauris, rutrum ut blandit eu, accumsan at lectus. Praesent eget pharetra massa. Praesent ante metus, dapibus eget lorem nec, porttitor porta sem.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc arcu urna, pellentesque interdum luctus quis, ornare vel diam. Etiam volutpat nunc quis metus vulputate pulvinar. Proin in tortor quam. Nam et efficitur tortor. Curabitur ornare commodo ligula, sed laoreet metus fermentum eget. Curabitur ac sem nisl. Phasellus pharetra enim euismod ligula condimentum pellentesque. Sed sed ornare felis.
Suspendisse vel feugiat orci. Mauris dolor turpis, semper finibus risus nec, cursus dignissim leo. Cras imperdiet nunc a accumsan dignissim. Donec quis mauris ac est vehicula scelerisque. Phasellus molestie sem vel varius elementum. In purus velit, pretium non magna et, posuere luctus est. Sed laoreet interdum lacus, in varius urna egestas eu. Aenean nisl orci, iaculis at lobortis in, condimentum sed neque. Pellentesque faucibus tristique placerat. Donec nec nulla ligula. Ut sed semper ipsum, vitae tristique odio.
Nullam interdum efficitur justo sit amet varius. Pellentesque blandit, eros in fringilla tincidunt, leo lectus venenatis urna, vel scelerisque quam odio lobortis augue. Etiam a sapien sollicitudin, dapibus felis ut, dapibus arcu. Phasellus eget interdum erat. Fusce pulvinar eros non ante cursus, et tristique felis rutrum. Phasellus malesuada sagittis interdum. Suspendisse pharetra ligula vel magna porttitor, ac convallis leo aliquet. Duis dui sapien, dapibus ac mi sit amet, ornare consequat mauris. Cras blandit suscipit nulla tristique convallis. Donec et ullamcorper diam. Nullam quis augue ex. Morbi tempus velit tortor. Morbi lacinia sit amet nulla ac rhoncus. Morbi feugiat, tellus vitae efficitur sodales, mauris nisi feugiat sapien, in dapibus ante leo non sem. Nullam rutrum neque nec nibh malesuada dignissim. Donec rutrum malesuada lacus eget rhoncus.
Ut aliquam augue felis, non consequat orci accumsan at. Maecenas nec tortor sit amet arcu porttitor consectetur. Mauris eu felis velit. Mauris vulputate tellus mollis eleifend efficitur. Praesent tempus mollis iaculis. Phasellus bibendum auctor tellus. Aliquam quis tellus non mauris fringilla dapibus. Etiam at leo accumsan, sollicitudin mauris tincidunt, venenatis nisl. Curabitur eget tempor tortor. Quisque vitae vestibulum lacus. Aliquam erat volutpat. Cras at neque mi. Proin maximus sem vitae ante suscipit viverra.
In efficitur varius enim a bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id nisl eget tellus feugiat aliquet at sed nunc. Maecenas sed libero velit. Phasellus aliquam ornare massa suscipit placerat. Fusce faucibus laoreet velit et varius. Cras quis nisi velit. Fusce vel sapien at neque molestie bibendum posuere lacinia mi. Sed vulputate, est ac finibus mattis, ligula elit varius ligula, in dictum lacus arcu id erat. Suspendisse vestibulum neque sed sagittis molestie. Vestibulum interdum sapien ut nulla pharetra, ac vulputate velit consectetur. Maecenas magna mauris, rutrum ut blandit eu, accumsan at lectus. Praesent eget pharetra massa. Praesent ante metus, dapibus eget lorem nec, porttitor porta sem.
</p>
</div>
</div>
</div>
</div>
<footer>
</footer>
</body>
</html>
