Off canvas with fixed sidebar

Using bootstrap 3.1.1 framework

by Pavankumar Kumbar

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <div id="header" class="navbar navbar-default navbar-fixed-top">
        <div class="navbar-header">
            <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".navbar-collapse">
                <i class="fa fa-list-alt"></i>

            </button>
            <a class="navbar-brand" href="#">Brand
            </a>

        </div>
        <nav class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="#">Navbar Item 1</a>

                </li>
                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Navbar
                    Item 2<b class="caret"></b></a>

                    <ul class="dropdown-menu">
                        <li><a href="#">Navbar Item2 - Sub Item 1</a>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Navbar Item 3</a>

                </li>
            </ul>
            <ul class="nav navbar-nav pull-right">
                <li class="dropdown"><a href="#" id="nbAcctDD" class="dropdown-toggle" data-toggle="dropdown">
                    <i class="icon-user"></i>Username<i class="icon-sort-down"></i></a>

                    <ul class="dropdown-menu pull-right">
                        <li><a href="#">Log Out</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>
    </div>
    <div id="wrapper">

        <div id="main-wrapper" class="col-md-10">
            <div id="main">
                <div class="page-header">
        ...

CSS

body {
     padding-top: 50px;
     overflow: hidden;
 }
 #wrapper {
     min-height: 100%;
     height: 100%;
     width: 100%;
     position: absolute;
     top: 0px;
     left: 0;
     display: inline-block;
 }
 #main-wrapper {
     height: 100%;
     overflow-y: auto;
     padding: 50px 0 0px 0;
     transition: all .5s linear;
     -moz-transition: all .5s linear;
     -webkit-transition: all .5s linear;
     -o-transition: all .5s linear;
 }
 .no-transition {
     -webkit-transition: none !important;
     -moz-transition: none !important;
     -o-transition: none !important;
     -ms-transition: none !important;
     transition: none !important;
 }
 #main {
     position: relative;
     height: 100%;
     overflow-y: auto;
     padding: 0 15px;
 }
 #sidebar-wrapper {
     height: 100%;
     padding: 50px 0 0px 0;
     position: fixed;
    right:0;
 }
 #sidebar {
     border-right: 1px solid gray;
     position: relative;
     height: 100%;
     overflow-y: auto;
     padding: 10px 15px 0;
     overflow-x: hidden;
 }
 .page-header {
     margin-top: 10px;
 }

JavaScript

$(function () {
            var $menu = $('#sidebar-wrapper');
            var $content = $('#main-wrapper');
            if ($.cookie('offcanvas') == 'hide') {
          $content.addClass('no-transition');
    $menu.hide();
    $menu.css('right', -($menu.outerWidth() + 10));
    $content.removeClass('col-md-10').addClass('col-md-12');
            }
            else if ($.cookie('offcanvas') == 'show') {
                $menu.show(500).animate({ right: 0 });
                //  $menu.show();
                $content.removeClass('no-transition');
                $content.removeClass('col-md-12').addClass('col-md-10');
            }


            $('.toggle-button').click(function () {
                $content.removeClass('no-transition');
                if ($menu.is(':visible') && $content.hasClass('col-md-10')) {
                    // Slide out
                    $menu.animate({
                        right: -($menu.outerWidth() + 10)
                    }, function () {
                        $menu.hide(1000);
                    });
                    $content.removeClass('col-md-10').addClass('col-md-12');
                    $.cookie('offcanvas', 'hide');
                }
                else {
                    // Slide in
                    $menu.show(500).animate({ right: 0 });
                    $content.removeClass('col-md-12').addClass('col-md-10');
                    $.cookie('offcanvas', 'show');
                }
                if($content.hasClass('col-md-12') && $menu.is(':hidden')) {
                $menu.animate({
                        right: 0
                    }, function () {
                        $menu.show(1000);
                    });
                //  $menu.show();
                $content.removeClass('no-transition');
                $content.removeClass('col-md-12').addClass('col-md-10');
                }
            });
            $('.bs-tooltip').tooltip();
        });