JSFiddle - React, Tailwind, and code Playground

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 with content <code>29. Last</code>, but gets cut off before.</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</a>
 <a href="#" class="list-group-item">02</a>
 <a href="#" class="list-group-item">03</a>
 <a href="#" class="list-group-item">04</a>
 <a href="#" class="list-group-item">05</a>
 <a href="#" class="list-group-item">06</a>
 <a href="#" class="list-group-item">07</a>
 <a href="#" class="list-group-item">08</a>
 <a href="#" class="list-group-item">09</a>
 <a href="#" class="list-group-item">10</a>
 <a href="#" class="list-group-item">11</a>
 <a href="#" class="list-group-item">12</a>
 <a href="#" class="list-group-item">13</a>
 <a href="#" class="list-group-item">14</a>
 <a href="#" class="list-group-item">15</a>
 <a href="#" class="list-group-item">16</a>
 <a href="#" class="list-group-item">17</a>
 <a href="#" class="list-group-item">18</a>
 <a href="#" class="list-group-item">19</a>
 <a href="#" class="list-group-item">20</a>
 <a href="#" class="list-group-item">21</a>
 <a href="#" class="list-group-item">22</a>
 <a href="#" class="list-group-item">23</a>
 <a href="#" class="list-group-item">24</a>
 <a href="#" class="list-group-item">25</a>
 <a href="#"...

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;
}

#sidebar{
 max-height: 100%;
overflow-y: auto;   
}
}

JavaScript

$('#sidebar').affix({
    offset: {
        top:150,
        bottom:0
    }
});



$('#sidebar').on('affixed.bs.affix', function(){
    $(this).removeAttr('style');
});