Аффикс Bootstrap Navbar с полноразмерным изображением

Я пытаюсь использовать функцию Bootstrap Affix, чтобы разместить панель навигации под полноразмерным адаптивным изображением. Когда пользователь прокручивает и достигает панели навигации, панель навигации фиксируется в верхней части экрана по мере того, как пользователь прокручивает дальше вниз. Связанный ниже JSFiddle помог мне настроить вещи, но верхнее смещение не кажется динамическим. Вместо этого, похоже, установлена ​​исходная высота главного изображения. Поэтому, когда я увеличиваю или уменьшаю размер экрана, аффикс больше не работает должным образом.

JSFiddle здесь: http://jsfiddle.net/MarkMarine/q3J56/7/

Это код, который я использовал для Javascript, чтобы попытаться сделать верхнее смещение динамическим:

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

});


jquery responsive-design twitter-bootstrap affix
person MattDionis    schedule 01.05.2014    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Чтобы сделать свойство верхнего смещения аффикса динамическим, вам нужно установить его как функцию.

Например, ваш js может быть таким:

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

jsfiddle здесь.

person Tasos K.    schedule 01.05.2014
comment
Просто чтобы убедиться, что я понял концепцию. Исходный код задает верхнее смещение один раз и сохраняет это значение, в то время как функция вызывает перерасчет каждый раз, когда изменяется высота .hero-image. Это нормальное понимание различий? - person MattDionis; 01.05.2014