Bootstrap 3 Template

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

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">
<div class="container">
    <div class="row">
        <div class="col-xs-4">
                <nav >
                    <div id="filterAnchor"></div>
                    <div id="filterScroll" class="fixed_div">
                        Fixed content First.</br>
                        Fixed content.</br>
                        Fixed content.</br>
                        Fixed content.</br>
                        Fixed content.</br>
                        Fixed content.</br>
                        Fixed content.</br>
                        Fixed content.</br>
                        Fixed content.</br>
                        Fixed content.</br>
                        Fixed content.</br>
                        Fixed content.</br>
                        Fixed content.</br>
                        Fixed content.</br>
                        Fixed content.</br>
                        Fixed content.</br>
                        Fixed content.</br>
                        Fixed content.</br>
                        Fixed content.</br>
                        Fixed content.</br>
                        Fixed content.</br>
                        Fixed content.</br>
                        Fixed content Middle.</br>
                        Fixed content Middle.</br>
                        Fixed content Middle.</br>
                        Fixed content Middle.</br>
                        Fixed content Middle.</br>
                        Fixed content Middle.</br>
                        Fixed content Middle.</br>
                        Fixed content Middle.</br>
                        Fixed content Middle.</br>
                        Fixed content Middle.</br>
                        Fixed content Middle.</br>
                        Fixed content Middle.</br>
                  ...

CSS

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

#filterScroll {
    position: absolute;
    overflow: auto;
}
#filterScroll.fixed {
    position: fixed;
}
.stick-top {
    top: 0;
}
.stick-bottom {
    bottom: 0;
}

JavaScript

// Cache selectors for faster performance.
    var $window = $(window)
    $document = $(document),
        $filterClass = $('#filterScroll'),
        $filterAnchor = $('#filterAnchor'),
        scrollPos = $window.scrollTop();
    // Run this on scroll events.
    $window.scroll(function() {
        var window_top = $window.scrollTop();
        var div_top = $filterAnchor.offset().top;
        var diff = scrollPos - window_top;
        var top = parseInt($filterClass.css('top'));
        var windowHeight = $window.height();
        var fixedHeight = $filterClass.height();
        if (isNaN(top)) {
            top = $filterClass.position().top
        }
        if (fixedHeight > $document.height()) {
            $filterClass.removeClass('fixed');
        } else if (diff < 0) {
            $filterClass.addClass('fixed');
            if(windowHeight < fixedHeight) {
                $filterClass.removeClass('stick-top');
                if (!$filterClass.hasClass('stick-bottom')) {
                    if(top < 0 && fixedHeight + top < windowHeight) {
                        $filterClass.addClass('stick-bottom');
                        $filterClass.css('top', '');
                    } else {
                        $filterClass.css('top', top+diff);
                    }
                } 
            } else {
                $filterClass.removeClass('stick-bottom');
                if (!$filterClass.hasClass('stick-top')) {
                    if (top < 0) {
                        $filterClass.addClass('stick-top');
                        $filterClass.css('top', 0);
                    } else {
                        $filterClass.css('top', top+diff);
                    }
                }
            }
            
        } else {
            $filterClass.addClass('fixed');                
            if (windowHeight > fixedHeight) {
                $filterClass.removeClass('stick-top');
                if (!$filterClass.hasClass('stick-bottom')) {
        ...