Change 'affix' offset-top on click a button by jQuery

Question

I want to Change 'affix' offset-top by clicking on a button by jQuery.

          $('#nav2').affix({
                offset: {
                  top: $("#nav1").height()+58
                }
          });

is working well, but I can't change the top value after loading my page containing the code.

Answer 1

You could do it like so:

$('#nav2')
    .affix({
        top: YOUR-NEW-VALUE
    })
    .affix('checkPosition'); // this will recalculate the position

Edit to answer your suggestion, Bootstrap affix documentation claims:

(checkPosition) Recalculates the state of the affix based on the dimensions, position, and scroll position of the relevant elements. The .affix, .affix-top, and .affix-bottom classes are added to or removed from the affixed content according to the new state. This method needs to be called whenever the dimensions of the affixed content or the target element are changed, to ensure correct positioning of the affixed content.

So there is no need to remove all the classes and re-initialize affix. Just use the code snippet above.

More about Bootstrap affix can be found here.

A best option will be to set it thur css:

#nav2 {
    position: fixed;
    top: YOUR-INITIAL-POSITON
}

And then with jQuery change the top position only:

$('#nav2').css('top', YOUR-NEW-VALUE);

Hope it helps.