How to use css bootstrap list-group with affix to create a sticky menu in a column?

Question

I am trying to create a sticky menu using CSS Bootstrap affix and list-group menu.

I manage to get most of it to work except for when the user scrolls down.

When the user scrolls down, the menu seems to take the entire with of the page.

I tried to set it up via data attributes

using something like this

<div class="container">
    <div class="row">
        <div class="col-md-3" id="leftCol">

            <div data-spy="affix">

                <div class="list-group list-group-root well">
                    <a class="list-group-item" href="#introduction">Introduction</a>
                    <a class="list-group-item" href="#features">Features</a>
                    <a class="list-group-item" href="#dependencies">Dependencies</a>
                </div>

            </div>

        </div>
        <div class="col-md-9" id="mainCol">

            Some long text for the body along with some tables.

        </div>
    </div>
</div>

But the data attribute did not make the menu stick! it just kept it on the top.

So I tried to use JS to get the job done like this

$(function(){

    $('#leftCol').affix({
      offset: {
        top: 100,
        bottom: function () {
          return (this.bottom = $('.footer').outerHeight(true))
        }
      }
    });


});

I created jsFiddle to show you the current behavior.

How can I fix this affix so when the user scrolls down the menu maintain the same shape?

Answer 1

First of all, you should use either data-attributes or JS.

I updated your jsFiddle. The position of id="leftCol" was changed:

<div class="col-md-3" >

        <div id="leftCol">

              ...

        </div>

    </div>

and style was added:

#leftCol {
   width: 220px;
}

Also, you should add media queries to remove affix from mobile view.