Twitter bootstrap change affix offset

Question

I have site where I want \'sub navigation\'. So when you scroll to section, its tool bar will affix below the main toolbar. I have this working, but I can\'t change the top offs

Answer 1

I figured it out. Instead of dynamically updating the offset, I changed the offset value to a function:

$(function () {
    $('.sec-nav').addClass("affix-top").each(function (){
        var $self = $(this);
        var offsetFn = function () {
            var $p = $self.closest('.sec');
            var $$ = $p.prevAll('.sec');
            var h = 0;
            $$.each(function () { h+=$(this).outerHeight();});
            return h;
        }
        $self.affix({offset: {top: offsetFn}});
    });
});

Now when a section changes due to dom manipulation or window re-size, the offset is automaticly changed due to the functions return value changing.

Answer 2

how about:

            $(window).off('.affix');
            $("#ID_NAME")
                .removeClass("affix affix-top affix-bottom")
                .removeData("bs.affix");
            $('#ID_NAME').affix({ 
              offset: {
                top: OTHER_VALUE
              }
            });

Answer 3

I simplified Fatmuemoo's answer slightly for a more basic case: My home page's nav bar (the default bootstrap #masthead) sits below a big background slider with id #bg. The height of the slider varies with 3 css breakpoints. We just set the offset of the #masthead to equal the height of the slider. Easy!

    $('header#masthead').affix({ //sticky header at bottom of bg
        offset: {
          top: function(){return $("#bg").outerHeight();}
        }
    });