When you work with the bootstrap 3 affix plugin, sometimes you experience some flicker.

The plugin switches rapidly the .affix .affix-top or .affix-bottom classes. This comes from setting your DOM-Element to e.g.

position: static;

One solution is to use a custom function for offsets and return different values for affix states.

In this example I return different values, if I already detect .affix-top class on my element.

var $navbar = $('.navbar');

$navbar.affix({
    offset: {
        top: function () {
            return ($navbar.hasClass("affix-top")) ? 240 : 100;
        }
    }
});
Categories: JavaScript