<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 class="row"> <div class="col-xs-6 col-lg-4"> <h2>Heading</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-default" href="#" role="button">View details »</a></p> </div><!--/.col-xs-6.col-lg-4--> <div class="col-xs-6 col-lg-4"> <h2>Heading</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-default" href="#" role="button">View details »</a></p> </div><!--/.col-xs-6.col-lg-4--> <div class="col-xs-6 col-lg-4"> <h2>Heading</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-default" href="#" role="button">View details »</a></p> </div><!--/.col-xs-6.col-lg-4--> <div class="col-xs-6 col-lg-4"> <h2>Heading</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-default" href="#" role="button">View details »</a></p> </div><!--/.col-xs-6.col-lg-4--> <div class="col-xs-6 col-lg-4"> <h2>Heading</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-default" href="#" role="button">View details »</a></p> </div><!--/.col-xs-6.col-lg-4--> <div class="col-xs-6 col-lg-4"> <h2>Heading</h2> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p><a class="btn btn-default" href="#" role="button">View details »</a></p> </div><!--/.col-xs-6.col-lg-4--> </div><!--/row--> </div><!--/.col-xs-12.col-sm-9--> <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar"> <div class="list-group"> <a href="#" class="list-group-item active">Link</a> <a href="#" class="list-group-item">Link</a> <a href="#" class="list-group-item">Link</a> <a href="#" class="list-group-item">Link</a> <a href="#" class="list-group-item">Link</a> <a href="#" class="list-group-item">Link</a> <a href="#" class="list-group-item">Link</a> <a href="#" class="list-group-item">Link</a> <a href="#" class="list-group-item">Link</a> <a href="#" class="list-group-item">Link</a> </div> </div><!--/.sidebar-offcanvas--> </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-toggle .icon-bar{ color:red; } .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(); });