Bootstrap blog fixed sidebar issue

Question

I'm trying to build a blog site and I'm initially using the template on getbootstrap.com's examples.

Basically, I want the sidebar on the right, to be fixed, so that when you scroll through blog posts, the sidebar stays where it is, like the top navigation does.

I've tried using the affix plugin, but having issues keeping it in the same place.

<div class="col-sm-3 col-sm-offset-1 blog-sidebar" data-spy="affix" data-offset-top="100">

Here's a JSFiddle - http://jsfiddle.net/Sambolina/L3a7q/

Answer 1

First, split out your sidebar from your column- in my earlier answer, I missed that:

<div class="col-sm-3 col-sm-offset-1"> 
    <div class="blog-sidebar" data-spy="affix" data-offset-top="130">
        <!---content--->
    </div>
</div>

When your sidebar gains the class affix, the css updates from position:relative to position:fixed , but you don't provide any CSS for the position of the sidebar once it is fixed. Now that your column isn't being affixed, you need to explicitly define the top positioning. To keep the width consistent, we'll also explicitly define it for both affixed and unaffixed states:

.blog-sidebar{
    width: 200px;
}

.blog-sidebar.affix{
    top: 40px;
    padding-top: 15px; /*or add it into the top value, I'm just weird*/
    width: 200px;
}

The only issue after that is handling how you'll deal with the column when it collapses- since it's affixed, the content will stay even after the column collapses. A good way to fix this is to add the class hidden-xs (and others if you change the column from sm) to hide this content, then create a new div as you want it to show up on small viewports and give it the class visible-xs . You can style this uniquely, which is probably a good idea since a navbar + nav + content on the smallest devices is probably too much.

For an example of all of this, see the Bootstrap docs which have a right affixed nav. (edited per author's comments below)