Bootstrap affix не поддерживает расположение столбца

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

Это происходит только тогда, когда я применяю свойства аффикса к div div.

Если вы заметили, что в нормальных ситуациях страница отображается без проблем, как вы можете видеть ниже: enter image description here

Однако, когда я прокручиваю вниз, это выглядит так: enter image description here

Для вашей справки, вот как я реализую аффикс div:

<div class="row content-wrapper">
    <div data-spy="affix" data-offset-top="200" data-offset-bottom="200" id="myAffix">
        <div class="col-lg-3">
            <!-- Sidebar code -->
        </div>
    </div>
    <div class="col-lg-9">
            <!-- content -->
    </div>
</div>

Здесь ссылка на скрипт JS, так что вы можете увидеть, что проблема происходит вживую:

Здесь скрипт JS для просмотра ошибки:

http://jsfiddle.net/fH46S/2/

Как я могу это исправить?

Ответы

Ответ 1

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

Вы можете исправить это, добавив контейнер DIV вне элемента #myAffix, а затем используя position: relative !important; в сочетании с запросом на носитель, установленным на 1200 пикселей, чтобы отключить функцию аффикса для устройств с небольшой шириной экрана.

Вторая вещь, которая происходит, - это фиксированное положение вашего прикрепленного элемента, вне позиции. Выньте

#myAffix{
    left: 0px;
}

и добавьте

.affix{
    top: 0px !important;
}

Теперь у вас будет фиксированная навигационная панель с левой стороны, которая будет работать без проблем с остальной частью страницы.

Чтобы увидеть все это вместе, ознакомьтесь с обновленным примером скрипта

Ответ 2

Здесь вы можете начать: http://jsfiddle.net/panchroma/H2KU7/

Он по-прежнему нуждается в refinememt, но важный бит сделан. Ключом к этому является то, что когда вы используете аффикс, Bootstrap JS применяет класс .affix к div, на который вы следите, после установленного количества прокрутки. Этот класс аффикса имеет css

position:fixed;

что и останавливает div от прокрутки. Он также берет div из нормального потока, поэтому вы получаете перекрытие.

Мое решение состояло в том, чтобы обернуть новый div вокруг панели левой стороны и применить к нему поведение аффикса. Ваш исходный код выводил <div class="col-lg-3"> из нормального потока, и это было корнем проблемы.

HTML

 <div class="col-lg-3">
    <div class="wrap" data-spy="affix" data-offset-top="200" data-offset-bottom="200" id="myAffix">
       <!-- your nav div here -->
    </div> <!-- close wrap -->
  </div> <!-- close col-lg-3 -->

ИЗМЕНИТЬ
Чтобы уточнить ваш css для поведения столбца левой руки, когда он прикреплен, введите в левую колонку что-то вроде

.col-lg-3 .wrap.affix{
 /* custom afix padding and styling here */
}

Надеюсь, это поможет!

Ответ 3

Установите два почти одинаковых навигатора. Один из них имеет класс = "navbar navbar-fixed-top", id = "nav_first" и style = "visibility: hidden;", Второй имеет class= "navbar" и id = "nav_second". Кроме этих различий, эти навигаторы являются тотальными.

Также добавьте этот код js на страницу.

$(document).ready(function(){
        console.log("document is ready");

        $(document).scroll(function(){
            console.log("hoook");
            var dist = elementOffset = $('#nav_second').offset().top  - $(window).scrollTop();
            console.log("dist: "+dist);
            if(dist<=0){
                $("#nav_first").css("visibility","visible");
            }
            else{

                $("#nav_first").css("visibility","hidden");
            }
        });

    });