Bootstrap Affix fixed position dynamic

Question

I am adding a menu to the side of my page using Bootstrap. I want the menu to stay at the top of the page when the user scrolls past it. I have discovered affix which is in bootstrap.js. However because I am using different col sizes for the screen I am struggling to get it to stay in the right place.

I have got it to start at the right time and to make it position the top correctly but the width and the right are not working.

I am using bootstrap 3.3.

I think that I will have to use percentages of the screen width and then also do media queries in the CSS.

JS Fiddle

Answer 1

I have solved it.

The element with affix needs to be a child to an element with a col- class on it. You then also have to set the width in pixels for each different screen width that bootstrap recognises.