How to apply css to bootstrap affix navbar

Question

When my navbar becomes "affixed" using bootstrap, I want to apply custom CSS as well, but I am not sure how to detect for that event. Bootstrap's affix doesn't have parameters for this.

My haml code is currently

windowReady = ->
    $('nav').height($('.affixable').height());
    $('.affixable').affix({
        offset: { top: $('.affixable').offset().top };      
    });

    # This is should activate when the navbar becomes affixed at the specified scroll offset.
    $('.affix').css({"box-shadow":"0 4px 2px -2px #888"});    

$(window).load(windowReady);
$(window).on('page:load', windowReady);

Thanks for any help =]

Answer 1

when the affix kicks in, it applies the .affix class to the element, so you could set your custom CSS by to .affix like this..

.affix {
    box-shadow:0 4px 2px -2px #888;
}

http://bootply.com/ggyKI6JbUB