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 .

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

When the user scrolls down, the menu seems to occupy the entire page.

I tried to configure it using 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 button! he just kept it on top.

So, I tried using JS to do this job 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 through the menu, maintains the same form?

Answer 1

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

I updated your jsFiddle . Changed id = "leftCol" position:

 <div class="col-md-3" > <div id="leftCol"> ... </div> </div> 

Style added

and style:

 #leftCol { width: 220px; } 

In addition, you must add media queries to remove the affix from the mobile view.

Answer 2

As an "unacceptable" workaround, I set the maximum menu width to 250px like this:

 .list-group.list-group-root { padding: 0; max-width: 250px; } 

I'm not sure how to make it work without adding max-with max with to be determined by the parent. In this case class="col-md-3"

UPDATED

javascript for salvation!

I added the following JS code to solve this problem once for all.

It basically resizes the menu every time affix.bs.affix event is fired

 $(document).on('affix.bs.affix', '#docs-menu', function() { $(this).width($(this).width()); }); 

From docs

affix.bs.affix => This event is triggered just before the element was attached.

Answer 3

Well, I believe that most of the code works the way you want it to. The main changes I made added this CSS:

 #leftCol { display: block; height: auto; padding: 0; width: 100%; } .navbar-fixed-top-again { position: static; top: 60px; z-index:1031; } .navbar-inner { background: red; padding: 5px; } .affix { position: fixed !important; } 

and I changed some structures on your HTML:

 <div class="container body-content"> <div>made up content to allow the navigation to scroll more before it becomes sticky. This height will need to be set in the data-offset-top which is in the leftCol DIV just below this content. The same will apply if you need to set it for a footer offset.</div> <!-- new nav section --> <div class="col-md-3 navbar-fixed-top-again" id="leftCol" data-spy="affix" data-offset-top="80"> <div class="navbar-inner"> <div class="list-group list-group-root well"> *the rest of your code* </div> </div> </div> </div> 

The main problem now is the presence of a sticky navigation menu with variable height. If you notice when you scroll through the reading content under the jumps and hide. It seems like it's possible to fix this using JavaScript (link to SO question) .

Here is a link to your updated script . Hope this helps.