Bootstrap3 affix navbar below 100% width image scrolls up then returns to original position

Question

I have the affix set on a navbar below a full width hero image, the desired result is the navbar scrolls up and as soon as it touches the top of the page it sticks. The problem is, the image height is dynamic, it's a full width image, so I can't set a fixed pixel height for the offset. I'm using jquery to set the offset based on the navbar position but the navbar jumps back down to it's original position as soon as it gets to the top.

This CSS should position my navbar when .affix is applied

#navbar-wrapper.affix {
top: 0px;
position: fixed;
width: 100%;
}

This is the jQuery to generate the affix

$(function() {
   $('#navbar-wrapper').height($("#nav").height());
});

$('#nav').affix({
   offset: $('#nav').position()
});

Here is a jsfiddle: http://jsfiddle.net/MarkMarine/q3J56/4/

I did some editing per the response below (and tweaked it a little) The fix for me was selecting the height of the .hero-image class for the affix offset, not the position of the navbar.

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

Thank you!!! updated jsfiddle for posterity

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

Answer 1

$('#nav').affix() add a class .affix to your div with id #nav. In your CSS you use #navbar-wrapper.affix this selector selects an element having both classes. So use #nav.affix or add a space in your first selector #navbar-wrapper .affix.