Overflow of sidebar with Twitter Bootstrap Affix

Question

I'm trying to use the affix plugin by twitter bootstrap but I can't figure out how to constrain it within the parent container, i've created the following example to show my problem:

Problem demo: http://www.codeply.com/go/DvcRXkeFZa

<div class="container">
    <div class="row">
        <div class="col-md-3 column">
            <ul id="sidebar" class="well nav nav-stacked" data-spy="affix" data-offset-top="130">
                <li><a href="#software"><b>Software</b></a></li>
                <li><a href="#features">Features</a></li>
                <li><a href="#benefits">Benefits</a></li>
                <li><a href="#costs">Costs</a></li>
            </ul>
        </div>
        <div class="col-md-9 column">
            <h1>Blah, blah, blah</h1>
            <hr>
            <a class="anchor3" id="top" name="software"></a>
            <p>
             content here that scrolls...
            </p>
        </div>
    </div>
</div>

As you can see when you scroll it overflows out of the sidebar, it also doesn't affix to the bottom of the page when it reaches the bottom.

A perfect example of why external links aren't a good idea, and the code should always be in the question. — Carol Skelly, Apr 10 '17 at 12:06

score 24 · Answer 1 · edited May 23 '17 at 10:30

24

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

edited May 23 '17 at 10:30

Community

1
1

answered Aug 16 '13 at 10:26

Carol Skelly

351,302
90
710
624

11

But how would the width work given that bootstrap is supposed to be responsive? Setting it to inherit gives it a width of 20% like the span and 100% makes it cover the whole page? – John Mellor Aug 16 '13 at 11:09
8

@FreezeDriedPop You have to explicitly handle that in your css w/ media queries, by defining the width of the affixed attribute at each breakpoint. Not ideal. I wish you could affix standard columns like this `
` and have it automagically affix to whatever size 3 columns represents in any viewport size.
– Kurt Schindler Feb 05 '14 at 04:37
Or only apply the affix responsively using media queries: http://stackoverflow.com/a/21029328/171456 – Carol Skelly Apr 10 '17 at 12:09

netcult · Answer 2 · 2014-11-28T10:12:14.613

3

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>');

edited Nov 28 '14 at 10:12

answered Nov 27 '14 at 15:52

netcult

167
1
1
11

1

Also add this to be able to keep the correct size on resize of the window! `$( window ).resize(function() { var navbw = $('#sidebar').width(); $('header').append(''); });` @kurt @Freeze @Skelly – netcult Dec 03 '14 at 13:37

Overflow of sidebar with Twitter Bootstrap Affix

2 Answers2

Linked