Twitter bootstrap change affix offset on DOM change

Question

Twitter bootstrap change affix offset may be helpful. Supposedly he basically had the same issue and posted the solution to my problem, but I couldn't get it to work unfortunately.

Here's the Bootstrap Affix plugin page (if you know another/better way than using this plugin, I'm all ears--- this plugin is not required): http://twitter.github.com/bootstrap/javascript.html#affix

http://jsfiddle.net/rPsK8/1

Here's a fiddle which sort of helps show my problem... But I couldn't get the Bootstrap Affix to do anything for some reason. :|

$(function () {
  $('#contentbody-toolbar').addClass("affix-top").each(function (){
    var $self = $(this);
    if ($("#advanced-total-outer").is(":visible")) {
    var offsetFn = function () {
        var $p = $('#advanced-total-outer').outerHeight();
        var h = 175 + $p;
        return h;
    }
    $self.affix({offset: {top: offsetFn}});
 } else {
    var offsetFn = function () {
        var h = 175;
        return h;
    }
    $self.affix({offset: {top: offsetFn}});
}
  });
});

EDIT: I simplified the above code to (should do the same thing):

$(function () {
  $('#contentbody-toolbar').addClass("affix-top").each(function (){
    var $self = $(this);
     var offsetFn = function () {
        var $p = $('.wrapper.clearfix.no-bord').outerHeight();
        var h = 175 + $p;
        return h;
    $self.affix({offset: {top: offsetFn}});
};
  });
});

But anyway, that's how my page is set up basically, and when you scroll down and the nav bar (#contentbody-toolbar) is at the top of the window, it fixes to it. Now, the problem is, as you can see, I have a div hidden which can be unhidden. So I need to update the offset when that element isn't hidden somehow.

The header can also change size (height) if the user so wishes, so it would also need to update for that. The code I posted above seems logical to me, and it seems to "work" in the sense that it recognizes the offset change, but the affix plugin doesn't update the change in the DOM apparently, if that makes sense. It will always become fixed after scrolling 175px.

I've been trying to get this to work for days, and quite honestly I'm frustrated. I really have no idea how to go about this. Stackoverflow's sidebar when asking a question seems to function how I want but I can't find their script for moveScroller.

Appreciate any help offered, very much so.

Answer 1

So, there I had noticed/mentioned stackoverflow's works like I wanted... Well, I searched out and found their code for it thanks to Josh Lee @ How can I make a div stick to the top of the screen once it's been scrolled to?

Used nearly the identical code he listed:

function moveScroller() {
    var move = function() {
        var st = $(window).scrollTop();
        var ot = $("#scroller-anchor").offset().top;
        var s = $("#scroller");
        if(st > ot) {
            s.css({
                position: "fixed",
                top: "0px",
                width: "61%"
            });
        } else {
            if(st <= ot) {
                s.css({
                    position: "relative",
                    top: "",
                    width: "auto"
                });
            }
        }
    };
    $(window).scroll(move);
    move();
}

<script type="text/javascript"> 
  $(function() {
    moveScroller();
  });
</script>