Off canvas with fixed sidebar

Using bootstrap 3.1.1 framework

by User888

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="wrapper">
        <div id="main-wrapper" class="col-md-10">
            <div id="main">
                <div class="page-header">
                    <h3><span class="toggle-button bs-tooltip" style="display: inline-block; cursor: pointer"
                        data-toggle="tooltip" data-placement="right" title="Click to toggle sidebar"><i class="fa fa-cog">
                        </i>
                    </span>Search Activity</h3>

                </div>
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Username</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td rowspan="2">1</td>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td>@mdo</td>
                        </tr>
                    </tbody>
                </table>
                <div class="table-responsive">
                    <table class="table table-bordered table-striped">
                        <colgroup>
                            <col class="col-xs-1">
                            <col class="col-xs-7">
                        </colgroup>
                        <thead>
                            <tr>
                                <th>Class</th>
                                <th>Description</th>
                 ...

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();
        });