Off canvas with fixed sidebar

Using bootstrap 3.1.1 framework

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="sidebar-wrapper" class="col-md-2">
        <div id="sidebar">
            <div class="form-group">
                <label for="exampleInputEmail1">Email address</label>
                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter...

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;
    
 }
 #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('left', -($menu.outerWidth() + 10));
    $content.removeClass('col-md-10').addClass('col-md-12');
            }
            else if ($.cookie('offcanvas') == 'show') {
                $menu.show(500).animate({ left: 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({
                        left: -($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({ left: 0 });
                    $content.removeClass('col-md-12').addClass('col-md-10');
                    $.cookie('offcanvas', 'show');
                }
                if($content.hasClass('col-md-12') && $menu.is(':hidden')) {
                $menu.animate({
                        left: 0
                    }, function () {
                        $menu.show(1000);
                    });
                //  $menu.show();
                $content.removeClass('no-transition');
                $content.removeClass('col-md-12').addClass('col-md-10');
                }
            });
            $('.bs-tooltip').tooltip();
        });