Changing offset dynamically in affix plugin

Question

I am using bootstrap affix plugin to make a div on right corner slide with the content. I have another section on the top of the window that will expand to open another section to show some details. The problem is, when the div of details section is expanded, the offset of affixed div must gets updated. I have done something like this

    <div class="affixed-box" data-offset-top="160" data-spy="affix">

    $(".detail-btn").click(function(){
    if ($(".opened").length > 0) //The detail div is expanded
         { 
      $(".affixed-box").attr('data-offset-top','160'); 
    }

    else    
   { 
     $(".affixed-box").attr('data-offset-top','400');
   }
    });

I have verified from developer tools that the offset gets updated, but the behavior of affixed element remain same ( it remains getting affixed on the same top position) . What else I need to do to dynamically update the offset top value.

Answer 1

Had a similar situation with a new site I'm working on (slideshow above affixed navbar changes height when window resizes, leaving the affixed navbar with the wrong offset).

The answer is to delete the affix data from the jQuery data cache and then remove any classes associated with the affix plugin, like this:

$([selector]).removeData('affix').removeClass('affix affix-top affix-bottom');

I found that at the bottom of https://github.com/twbs/bootstrap/issues/5870

Answer 2

According to the manual you may pass in data attribute the function that returns the offset value.

If you would start JSFiddle with the problem someone who already dealt with it could help you easily.

Answer 3

See if the scrollspy('refresh') method helps: http://twitter.github.com/bootstrap/javascript.html#scrollspy

.scrollspy('refresh')

When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:

$('[data-spy="affix"]').each(function () {
var $spy = $(this).scrollspy('refresh')
});

Good luck!