Bootstrap Navbar перекрытие содержимого при использовании наклеить

Question

Я хочу

• Сайта баннер с навигационной панелью ниже
• баннера исчезнуть при прокрутке вниз, но Navbar к остается неподвижными

I нашел этот jsfiddle, который обеспечивает вышеупомянутое решение: http://jsfiddle.net/DTcHh/541/

Два основных пункта c ode:

//js 
$('#topnavbar').affix({ 
    offset: { 
     top: $('#banner').height() 
    } 
}); 

//css 
#topnavbar.affix { 
    position: fixed; 
    top: 0; 
    width: 100%; 
} 

Моя проблема сейчас, когда вы прокрутите страницу до точки, где происходит «аффикс». Если вы внимательно посмотрите на этот момент, то он будет прыгать, и теперь навигационная панель перекрывает первые 4 строки в абзаце

Любые идеи, как избавиться от этого перекрытия?

Answer 1

Вам необходимо сместить фиксированный элемент .navbar, добавив padding-top в элемент body, равный высоте фиксированного элемента.

Вы можете слушать affix.bs.affix/affix-top.bs.affix events, а затем определить, следует ли padding быть равен элемент height или удалено:

- прыжок вы видели больше не происходит.

$('#topnavbar').on('affix.bs.affix affix-top.bs.affix', function (e) { 
    var padding = e.type === 'affix' ? $(this).height() : ''; 
    $('body').css('padding-top', padding); 
}); 

Answer 2

Добавить "г-индекс: 10;" к классу topnavbar.affix в CSS.

position: fixed; 
top: 0; 
width: 100%; 
z-index:10;