Bootstrap 3 - Multiple Affix

by Kyle Mitofsky

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">

<section id="bm">
    
    <div class="jumbotron">
        
        <div class="container">
            
            <h1>Free, Open and Powerfull</h1>
            <p>Start with your custom HTML5 enterprise backend application<br>in minutes.</p>
            </div>
        </div>
        
        <div class="container">
            
            <div class="row">
                
                <div class="col-md-9" id="foo1">
                    
                    <div>
                        <h1 class="page-header">Section 1</h1>
                        <h3>Section 1.1</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec erat tempus mauris lobortis molestie. Aliquam eget consectetur magna. Suspendisse semper metus placerat, fringilla ligula ac, convallis velit. Ut euismod arcu sed massa luctus, vel vehicula justo condimentum. Nunc nunc leo, porttitor ut vestibulum eget, iaculis eget libero. Nam vitae malesuada lorem. Ut dapibus turpis eget diam tincidunt, vel sollicitudin arcu bibendum. Morbi accumsan placerat est. Integer euismod adipiscing dolor, in euismod nisi suscipit nec. Nullam euismod leo sit amet quam malesuada congue. Etiam est felis, pellentesque ac condimentum quis, eleifend ut massa.</p>
                        
                        <h3>Section 1.2</h3>
                        <p>Nulla scelerisque bibendum cursus. Ut ultrices placerat accumsan. Vivamus consequat eu leo non facilisis. Etiam sollicitudin sodales massa ut convallis. Proin sagittis pulvinar cursus. Nulla pharetra tortor id placerat mattis. Donec vitae mollis nunc, quis tincidunt tortor. Aenean fringilla posuere lectus vel mollis. Cras luctus, purus non posuere fringilla, tortor nunc auctor...

CSS

#bm          .jumbotron { background: #ADD2ED; }
#get-started .jumbotron { background: #F2DEDE; }
#bm-client   .jumbotron { background: #D9EDF7; }
#bm-server   .jumbotron { background: #DFF0D8; }


.affix {
    position: fixed !important; 
    top: 10px; 
}
.affix-top,
.affix-bottom {
    position: relative;
}

JavaScript

$('.sideNav').each(function() {
    
    $(this).affix({
        offset: {
            top: function(e) {
                var $curSection = $(e).closest('.row');
                return (this.top = $curSection.offset().top - 10);
            },
            bottom: function (e) {
                var $nextSection = $(e).closest('section').next('section');
                //if last element, go to bottom of page
                var bottom = ($nextSection.length === 0) ? 0 :
                             $(document).height() - $nextSection.offset().top;
                return (this.bottom = bottom);
            }
        }
    });
});