Header - Sticky Sidebar - Until Reaches Footer

by Sean Moran

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<header>
     <h1>This is the header</h1>

</header>
<div class="container">
    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            <div class="well well-small affix-top" id="account-overview-container">
                 <h4 class="no-top-margin">Customer Info</h4>

                <ul class="account-info-list list-unstyled no-bottom-margin">
                    <li> <strong class="info-title" style="width: 78px;">Name:</strong>
 <span class="info-data" style="width: 180px;">resold1 of reseller2</span>

                    </li>
                    <li> <strong class="info-title" style="width: 78px;">Location:</strong>
 <span class="info-data" style="width: 180px;">			<em class="muted">N/A</em>
      </span>

                    </li>
                    <li> <strong class="info-title" style="width: 78px;">Local Time:</strong>

                        <time class="info-data" datestamp="1/1/0001 12:00:00 AM" title="12:00:00 AM" style="width: 180px;">12:00 AM</time>
                    </li>
                    <li> <strong class="info-title" style="width: 78px;">Contact:</strong>
 <span class="info-data" style="width: 180px;">first last</span>

                    </li>
                    <li> <strong class="info-title" style="width: 78px;">Phone:</strong>
 <span class="info-data" style="width: 180px;">8675309</span>

                    </li>
                    <li> <strong class="info-title" style="width: 78px;">Mobile:</strong>
 <span class="info-data" style="width: 180px;">			<em class="muted">N/A</em>
      </span>

                    </li>
                    <li> <strong class="info-title" style="width: 78px;">Email:</strong>
 <span class="info-data" style="width: 180px;"><a href="mailto:[email protected]">[email protected]</a></span>

        ...

SCSS

body{
    position:relative;
}
header,
footer{
    background: #ccc;
    padding:40px 0;
    text-align:center;
}
header{
    margin-bottom: 10px;
}
#account-overview-container {
    &.affix{
		position: fixed;
        top: 10px
	 }
    
    &.affix-top{
		position: static;
	 }

	  &.affix-bottom{
		position:absolute;
	 }
}

.account-info-list{
	li{ 
            &:before,
            &:after {
            display: table;
            content: "";
            line-height: 0;
        }
            &:after {
                clear:both;
            }
	}

	.info-title{
		margin-right: 2px;
	}

	.info-title,
	.info-data{
		float:left;
	}
    footer {
        padding: 10px 0;
    }
    footer h1 {
        margin-top: 0;
    }
}

JavaScript

var headerHeight = $('header').outerHeight(true); // true value, adds margins to the total height
var footerHeight = $('footer').innerHeight();
$('#account-overview-container').affix({
    offset: {
        top: headerHeight,
        bottom: footerHeight
    }
}).on('affix.bs.affix', function () { // before affix
    $(this).css({
        /*'top': headerHeight,*/    // for fixed height
            'width': $(this).outerWidth()  // variable widths
    });
}).on('affix-bottom.bs.affix', function () { // before affix-bottom
    $(this).css('bottom', 'auto'); // THIS is what makes the jumping
});