JSFiddle - React, Tailwind, and code Playground

by Abdull

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<header class="masthead bg-primary">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                 <h1>Bootstrap 3 Affix Too Long
</h1>

                 <h2>Uses
                    <ul>Bootstrap CSS + JS 3.1.0</ul>
                    <ul>jQuery 2.1.0</ul>
                </h2>

                 <h3>Depending on your viewport, notice how the left outline often doesn't show up to the last entry <code>15 of 15. Last</code></h3>

            </div>
        </div>
    </div>
</header>
<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div class="list-group" id="sidebar"> <a href="#" class="list-group-item">01 of 15</a>
 <a href="#" class="list-group-item">02 of 15</a>
 <a href="#" class="list-group-item">03 of 15</a>
 <a href="#" class="list-group-item">04 of 15</a>
 <a href="#" class="list-group-item">05 of 15</a>
 <a href="#" class="list-group-item">06 of 15</a>
 <a href="#" class="list-group-item">07 of 15</a>
 <a href="#" class="list-group-item">08 of 15</a>
 <a href="#" class="list-group-item">09 of 15</a>
 <a href="#" class="list-group-item">10 of 15</a>
 <a href="#" class="list-group-item">11 of 15</a>
 <a href="#" class="list-group-item">12 of 15</a>
 <a href="#" class="list-group-item">13 of 15</a>
 <a href="#" class="list-group-item">14 of 15</a>
 <a href="#" class="list-group-item">15 of 15. Last</a>

            </div>
        </div>
        <div class="col-md-9">
            	<h2>Content</h2>
Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem...

CSS

header {
    height:270px;
}
@media (min-width: 979px) {
    #sidebar.affix-top {
        position: static;
        margin-top:25px;
        width:228px;
    }
    #sidebar.affix {
        position: fixed;
        top:25px;
        width:228px;
    }
}
.affix, .affix-top {
    position:static;
}

JavaScript

$('#sidebar').affix({
    offset: {
        top: $('header').height()
    }
});