Overflow of sidebar with Twitter Bootstrap Affix [closed]

Answer 1

From the Bootstrap docs (http://getbootstrap.com/2.3.2/javascript.html#affix)..

Heads up! You must manage the position of a pinned element and the behavior of its immediate parent. Position is controlled by affix, affix-top, and affix-bottom. Remember to check for a potentially collapsed parent when the affix kicks in as it's removing content from the normal flow of the page.

So you need some CSS for affix to set the width for the element when it becomes fixed. Such as:

#sidebar.affix {
    position: fixed;
    top: 0;
    width:225px;
  }

Demo on Bootply: http://bootply.com/73864

Related answers on Bootstrap affix:
How to create a sticky left sidebar menu using bootstrap 3?
Twitter-bootstrap 3 affixed sidebar overlapping content when window resized and also footer

Answer 2

In an answer to @FreezeDriedPop I found this to work for me:

var navbw = $('#sidebar').width()-7;
$('header').append('<style id="addedCSS" type="text/css">#sidebar.affix {width:'+navbw+'px;}</style>');