Bootstrap Affix Nav вызывает Div ниже, чтобы прыгать

Я создал JSFiddle, используя функцию аффикса Bootstrap, чтобы навигатор оставался в верхней части экрана после прокрутки вниз, и заголовок выходит из поля зрения.

Проблема, с которой я сталкиваюсь, заключается в том, что при использовании чистого HTML текст ниже nav вскакивает и скрывается за Nav слишком рано.

Посмотрите проблемный код здесь.

Вот код, который я использовал:

<div class="container">
<div class="row">
    <div class="span12">
        <div class="well">
            <h1>Banner</h1>
        </div>
    </div>
</div>
</div>
<div class="nav-wrapper">
<div class="nav navbar affix" data-spy="affix" data-offset-top="120">
    <div class="navbar-inner">
        <div class="container">
            <div class="span12">
                <a class="brand" href="#">My Brand</a>
                <span class="navbar-text">
                    This is a navbar.
                </span>
            </div>    
        </div>
    </div>
</div>
</div>
<div class="container">
<div class="span3">
    <h2>some lorem ipsum for scrolling:</h2>
   Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>
</div>

CSS выглядит следующим образом:

.affix {
    position: fixed;
    top: 0;
    width: 100%
}

Я нашел очень похожую проблему здесь, но при использовании кода, как в этом примере, по какой-то причине он не работает для меня.

Дополнительный фрагмент CSS, который сделал трюк, выглядит следующим образом:

.affix + .container {
    padding-top:50px
}

Я также знаю о таких решениях JavaScript, как этот здесь, который использует следующий код для создания желаемого эффекта:

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

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

Я просто пытаюсь понять, почему моя конкретная версия только для HTML не ведет себя при реализации предыдущего исправления, используя исправление CSS padding-top.

Заранее благодарю вас за помощь.

Ответ 1

Это работает:

.nav-wrapper
{
    min-height:50px;
}

Обновлен jsFiddle: http://jsfiddle.net/yYE62/5/

Что происходит в том, что плагин affix делает элемент с классом .affix в фиксированной позиции в документе. Это удаляет прикрепленный элемент из потока (или макета, если вы предпочитаете) и заставляет контейнер свернуть. Когда это произойдет, содержимое ниже скользит вверх, чтобы заполнить пробел, который использовался для прикрепленного элемента.

Добавив правило выше, вы указываете, что контейнер поддерживает минимальную высоту независимо от того, имеет ли он контент или нет. Это не должно быть 50px; что высота по умолчанию .navbar, поэтому настройте в соответствии с вашими потребностями. Если вы не хотите, чтобы все .nav-wrapper имели минимальную высоту, назначьте id и используйте это вместо этого.

Ответ 1

Ответ 2