Bootstrap Navbar Affix with Full-width Image

Question

I am attempting to use the Bootstrap Affix feature to place my navbar below a full-width responsive image. When a user scrolls and reaches the navbar, the navbar will become fixed to the top of the screen as the user scrolls further down. The below linked JSFiddle helped me set things up, but the top offset does not appear to be dynamic. Instead it seems to be set to the original height of the hero image. So when I expand or shrink the screen size the affix no longer functions as intended.

JSFiddle here: http://jsfiddle.net/MarkMarine/q3J56/7/

This is the code I used for the Javascript to attempt to make the top-offset dynamic:

$('#navbar-wrapper').affix({
offset: {
    top: $('.hero-image').height()
}

});

Answer 1

In order to make the top offset property of the affix dynamic you need to set it as a function.

For example, your js can be like this:

$('#navbar-wrapper').affix({
    offset: {
        top: function() {return $('.hero-image').height();}
    }
});

A jsfiddle is here.