Bootstrap 3 Template

This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.

by 1eddy87

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="navmenu offcanvas navmenu-default navmenu-fixed-right">
    <div class="panel-image-container">
        <img class="img-responsive" src="https://s-media-cache-ak0.pinimg.com/736x/a1/e3/6b/a1e36bcb8ce179bd8cc8db28ff4ef6fb.jpg" />
    </div>
    <div style="color: #fff; padding: 0 10px">
        <h4>This is where the title for the post will go</h4>
        <div>
            <p>This is where the comments for the post will go</p>
        </div>
    </div>
</div>
<div class="canvas">
    <div class="header" role="banner">
         <h5>header</h5>
 <a class="navbar-toggle test" data-toggle="offcanvas" data-recalc="false" data-target=".navmenu" data-canvas=".canvas"><i class="fa fa-align-right fa-lg"></i></a>

    </div>
    <div class="container">
        <div class="page-header">
             <h1>Offcanvas</h1>

        </div>
        <p class="lead">What a pain in the ass this was, however finally IT WORKS!</p>
        <br />
        <p class="lead">What a pain in the ass this was, however finally IT WORKS!</p>
        <br />
        <p class="lead">What a pain in the ass this was, however finally IT WORKS!</p>
        <br />
        <p class="lead">What a pain in the ass this was, however finally IT WORKS!</p>
        <br />
        <p class="lead">What a pain in the ass this was, however finally IT WORKS!</p>
        <br />
        <p class="lead">What a pain in the ass this was, however finally IT WORKS!</p>
        <br />
        <p...

CSS

html, body {
    height: 100%;
    background: #fafafa;
}
.container {
    background-color: #fafafa;
    height: 100%;
    width: 100% !important;
}
.navbar-toggle {
    /* float: left; */
    float: right;
    margin-left: 15px;
}
@media (min-width: 0) {
    .navbar-toggle {
        display: block;
        /* force showing the toggle */
    }
}
@media (min-width: 992px) {
    body {
        padding: 0;
    }
    .navbar {
        /* right: auto; */
        left: auto;
        background: none;
        border: none;
    }
}
.canvas {
    position: relative;
    left: 0;
    top: 0;
    height: 100%;
    padding: 0px 0px 0px;
    background: #FFF none repeat scroll 0% 0%;
    z-index: 2;
}
.panel-image-container {
    padding: 10px;
}
.img-responsive { border: 1px solid #fafafa; margin: 0 auto; }
.navmenu {
    z-index: 1;
    width: 70%;
    background: #333;
}
.test {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1000;
}
i {
    cursor: pointer;
}
.header {
    width: 100%;
    height: 50px;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    background: #fafafa;
    color: #fff;
    padding: 5px 10px;
    border-bottom: 1px solid #e7e7e7;
}
.page-header {
    margin-top: 6em;
}
.panelD {
    padding: 0px;
    border: 0px;
    border-radius: 0;
    margin: 0;
}
.panel-body {
    padding: 0;
}
.panel-body p {
    margin: 10px;
}

JavaScript

/*
		By Osvaldas Valutis, www.osvaldas.info
		Available for use under the MIT License
	*/

	/*

	;
	(function (document, window, index) {
	    'use strict';

	    var elSelector = '.header',
	        element = document.querySelector(elSelector);

	    if (!element) return true;

	    var elHeight = 0,
	        elTop = 0,
	        dHeight = 0,
	        wHeight = 0,
	        wScrollCurrent = 0,
	        wScrollBefore = 0,
	        wScrollDiff = 0;

	    window.addEventListener('scroll', function () {
	        elHeight = element.offsetHeight;
	        dHeight = document.body.offsetHeight;
	        wHeight = window.innerHeight;
	        wScrollCurrent = window.pageYOffset;
	        wScrollDiff = wScrollBefore - wScrollCurrent;
	        elTop = parseInt(window.getComputedStyle(element).getPropertyValue('top')) + wScrollDiff;

	        if (wScrollCurrent <= 0) // scrolled to the very top; element sticks to the top
	        element.style.top = '0px';

	        else if (wScrollDiff > 0) // scrolled up; element slides in
	        element.style.top = (elTop > 0 ? 0 : elTop) + 'px';

	        else if (wScrollDiff < 0) // scrolled down
	        {
	            if (wScrollCurrent + wHeight >= dHeight - elHeight) // scrolled to the very bottom; element slides in
	            element.style.top = ((elTop = wScrollCurrent + wHeight - dHeight) < 0 ? elTop : 0) + 'px';

	            else // scrolled down; element slides out
	            element.style.top = (Math.abs(elTop) > elHeight ? -elHeight : elTop) + 'px';
	        }

	        wScrollBefore = wScrollCurrent;
	    });

	}(document, window, 0));

	*/

	// JQUERY VERSION:

	;
	(function ($, window, document, undefined) {
	    'use strict';

	    var elSelector = '.header',
	        $element = $(elSelector);

	    if (!$element.length) return true;

	    var elHeight = 0,
	        elTop = 0,
	        $document = $(document),
	        dHeight = 0,
	        $window = $(window),
	        wHeight = 0,
	        wScrollCurrent = 0,
	   ...