Bootstrap 3.0 affix with list changes width

Question

I\'m migrating to bootstrap 3.0.0 and I\'m having issues with an affixed menu to the left: as soon as it becomes affixed (after 10px scroll), its width changes. In this fiddle i

Answer 1

$(window).scroll(function () {
    $('#secondary .widget-area.affix').width($('#secondary').width());
});

Answer 2

Here's my version.

var fixAffixWidth = function() {
  $('[data-spy="affix"]').each(function() {
    $(this).width( $(this).parent().width() );
  });
}
fixAffixWidth();
$(window).resize(fixAffixWidth);

CSS

div.affix {
    position: fixed !important;
}

Answer 3

My solution as well:

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

(.menu-card is my sticky div)

I added this for supporting the window resizing:

Let's assume the affix are in a parent div #menu-card-pane.

$(window).resize(function () {
    var parentSize = $('#menu-card-pane').width();
    $('.affix').each(function() {
        var affixPadding = $(this).innerWidth() - $(this).width();
        $(this).width(parentSize - affixPadding);
    });
});

Answer 4

I use this code to fix the width of the affix.

$(document).on('affixed.bs.affix',function(e){
    $('.affix').each(function(){
        var elem = $(this);
        var parentPanel = $(elem).parent();
        var resizeFn = function () {
            var parentAffixWidth = $(parentPanel).width();
            elem.width(parentAffixWidth);
        };      

        resizeFn();
        //$(window).resize(resizeFn);
    });
});

The affix get the width of his parent and check that width on every scroll the web. Uncommenting the last line, execute too on resize window event.

Answer 5

Here's another version:

$('.sitebar .affix-top').width($('.sitebar .affix-top').width());
$(window).resize(function () {
    $('.sitebar .affix').width($('.sitebar .affix-top').width());
});
$(window).scroll(function () {
    $('.sitebar .affix').width($('.sitebar .affix-top').width());
});

Answer 6

had the same problem once (only in BS 2.3.2).

Not an answer, more a hack: I gave the affixed element a width. That sucked, because i had to set width for all resolutions (RWD) and actually the value should be standard column width (e.g. .span4).

Yes: position: fixed takes the element out of the given context (in your case col-md-3).