Bootstrap 3 sticky left sidebar

Question

I'm not that familiar with bootstrap . I have been stuck for a day now just trying to create a sticky sidebar. Currently I'm having a sub navigation bar that is using affix of bootstrap here is sample:

Top navigation bar

<div id="top-nav" class="navbar navbar-inverse navbar-static-top" style="margin-bottom: 0;">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">BiddingTool</a>

        <div class="navbar-text">
            <ul class="navbar-nav list-inline">
                <li><a href="#" style="margin-left: 5px;"><i class="glyphicon glyphicon-road"></i> Projects</a></li>
                <li><a href="#" style="margin-left: 20px;"><i class="glyphicon glyphicon-list"></i> Database</a></li>
            </ul>
        </div>

    </div>
</div><!-- /.Navigation Bar -->

Lower navigation bar

<!-- Lower Navigation Bar -->
<div class="navbar-xs">
<div id="lower-nav" class="navbar navbar-default navbar-static-top">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">&nbsp;</a>
    </div>

    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li><a href="#"><i class="fa fa-group"></i> Labor</a></li>
            <li><a href="#"><i class="fa fa-tint"></i> Material</a></li>
            <li><a href="#"><i class="fa fa-wrench"></i> Equipment</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right" style="margin-right: 5px;">
            <li><a href="#"><i class="glyphicon glyphicon-lock"></i> Logout</a></li>
        </ul>
     </div>
</div>
</div><!-- /.Lower Navigation Bar -->

I used this in my CSS:

.affix { top: 50px; width:100%; }

and in JS

$('.navbar-lower').affix({
  offset: {top: 50}
});

And here is my working example fiddle

My question is how can I make a sticky sidebar using panel of bootstrap?

Answer 1

Check out this updated Fiddle http://jsfiddle.net/5xEc3/1/

For your sidebar Div I have made it like this...

<div id="sidebar" class="panel panel-default" data-spy="affix" data-offset-top="60" data-offset-bottom="400">

data-spy="affix" data-offset-top="60" data-offset-bottom="400" are where the magic is. You have to position it how you want with CSS now.