Question

I’ve created an example here : http://jsfiddle.net/Ninjanoel/9GEGU/

Basically, I’d like to affix something to the right, in this case, the red box, I want it to appear to just pin itself to the top as it should once the correct amount of page scroll has occurred, but everytime it ‘affixes’, it jumps to the left, overlapping the content I already have on the left.

It’s great that bootstrap has such a volume of documentation, but unfortunately I think I’m missing something regarding this. Please help.

var offsetFn = function() {
   return $('#sidebar').position().top;
}

$(document).ready(function(e) {
  $('#sidebar').affix({
      offset: {top: offsetFn}
  });
});​

is a code snippet I found on Stack overflow to not have to guess the top offset value, but even if I give it a simple value, when the div becomes affixed it jumps left.

Note about the fiddle : it doesn’t appear to be working very well, at least the version on my hdd jumps left, but it is the code i’m using basically, and the small window size may complicate things, green and red boxes are suppose to be vertical columns

Answer 1

Create inner div for sidebar. Affix is setting position: fixed to column therefore making it not working.

Edit: see http://jsfiddle.net/9GEGU/2/ and your function is needless, only causing weird behaviour in FF, so remove {offset: {top: offsetFn}}. It will look the same but scrolling will be smoother.

Also set width of span5 (290px) to the #sidebar because when element has position: fixed it is removed from document flow and isn’t limited by parent’s width.