<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<!-- Fixed navbar -->
<nav id="header" class="navbar navbar-fixed-top">
<div id="header-container" class="container navbar-container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a id="brand" class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</nav><!-- /.navbar -->
<div class="container">
<div class="row row-offcanvas row-offcanvas-right">
<div class="col-xs-12 col-sm-9">
<p class="pull-right visible-xs">
<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
</p>
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
</div>
</div><!--/.col-xs-12.col-sm-9-->
</div><!--/row-->
<hr>
<footer>
<p>© Company 2014</p>
</footer>
</div><!--/.container-->
/*
* Style tweaks
* --------------------------------------------------
*/
html,
body {
overflow-x: hidden; /* Prevent scroll on narrow devices */
}
body {
padding-top: 100px;
}
footer {
padding: 30px 0;
}
/*
* Custom styles
*/
.navbar-brand {
font-size: 24px;
}
.navbar-container {
padding: 20px 0 20px 0;
}
.navbar.navbar-fixed-top.fixed-theme {
background-color: #222;
border-color: #080808;
box-shadow: 0 0 5px rgba(0,0,0,.8);
}
.navbar-brand.fixed-theme {
font-size: 18px;
}
.navbar-container.fixed-theme {
padding: 0;
}
.navbar-brand.fixed-theme,
.navbar-container.fixed-theme,
.navbar.navbar-fixed-top.fixed-theme,
.navbar-brand,
.navbar-container{
transition: 0.8s;
-webkit-transition: 0.8s;
}
$(document).ready(function(){
/**
* This object controls the nav bar. Implement the add and remove
* action over the elements of the nav bar that we want to change.
*
* @type {{flagAdd: boolean, elements: string[], add: Function, remove: Function}}
*/
var myNavBar = {
flagAdd: true,
elements: [],
init: function (elements) {
this.elements = elements;
},
add : function() {
if(this.flagAdd) {
for(var i=0; i < this.elements.length; i++) {
document.getElementById(this.elements[i]).className += " fixed-theme";
}
this.flagAdd = false;
}
},
remove: function() {
for(var i=0; i < this.elements.length; i++) {
document.getElementById(this.elements[i]).className =
document.getElementById(this.elements[i]).className.replace( /(?:^|\s)fixed-theme(?!\S)/g , '' );
}
this.flagAdd = true;
}
};
/**
* Init the object. Pass the object the array of elements
* that we want to change when the scroll goes down
*/
myNavBar.init( [
"header",
"header-container",
"brand"
]);
/**
* Function that manage the direction
* of the scroll
*/
function offSetManager(){
var yOffset = 0;
var currYOffSet = window.pageYOffset;
if(yOffset < currYOffSet) {
myNavBar.add();
}
else if(currYOffSet == yOffset){
myNavBar.remove();
}
}
/**
* bind to the document scroll detection
*/
window.onscroll = function(e) {
offSetManager();
}
/**
* We have to do a first detectation of offset because the page
* could be load with scroll down set.
*/
offSetManager();
});
