Bootstrap3 affix navbar ниже 100% ширина изображения прокручивается, а затем возвращается в исходное положение

Question

У меня есть аффикс, установленный на навигационной панели под изображением героя полной ширины, желаемый результат - это навигация, который прокручивается вверх и как только он касается верхней части страница, на которой она хранится. Проблема в том, что высота изображения динамическая, это изображение полной ширины, поэтому я не могу установить фиксированную высоту пикселя для смещения. Я использую jquery для установки смещения на основе позиции навигатора, но навигационная панель возвращается к исходной позиции, как только она попадает в верхнюю часть.

Этот CSS должен позиционировать свою Navbar когда .affix применяется

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

Это JQuery для создания аффикс

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

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

Вот jsfiddle: http://jsfiddle.net/MarkMarine/q3J56/4/

Я сделал некоторые редактирование за ответ ниже (и немного его подстроил) Исправление для меня было sele cting высота класса .hero-image для смещения аффикса, а не положение навигационной панели.

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

спасибо !!! обновленный jsfiddle для потомков

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

Answer 1

$('#nav').affix() добавить класс .affix к вашему DIV с идентификатором #nav. В вашем CSS вы используете #navbar-wrapper.affix, этот селектор выбирает элемент, имеющий оба класса. Поэтому используйте #nav.affix или добавьте пробел в свой первый селектор #navbar-wrapper .affix.