Аффикс Bootstrap 3.0.3 - контент не находится в фиксированном месте и перемещается поверх другого контента

Question

У меня есть устаревшее приложение, созданное с помощью Bootstrap 3.0.3. В этом случае мы не можем обновить Bootstrap.

Тем не менее, я пытаюсь с 3.0.3 использовать функциональность аффикса.

У меня есть следующее, что я также настроил на jsfiddle: https://jsfiddle.net/x8fc9opm/8/

Я пытаюсь создать левую область .col-md-8 (с красной рамкой) с "библиотекой" предметов в .col-md-4 (с голубой рамкой) справа.

Левая область может стать очень длинной, и я хочу, чтобы синяя область всегда была видна, даже если пользователь прокручивает ее вниз.

Итак, я добавил следующее к .col-md-4:

<div class="col-md-4 tag-container" data-spy="affix" data-offset-top="60" data-offset-bottom="200">

Когда я запускаю это, с affix перемещается влево и перекрывает красную область!

Почему это? Я думал, что аффикс был разработан, чтобы исправить содержимое на месте.

Что я здесь не так делаю?

Answer 1

В вашей скрипке при открытии консоли выдает сообщение Uncaught Error: Bootstrap requires jQuery. Когда это добавлено выше других скриптов, аффикс работает как положено.

Также оберните столбец, который должен оставаться фиксированным. Изменения:

<div class="col-md-4 tag-container" data-spy="affix" data-offset-top="60" data-offset-bottom="200">
    ...
</div>

Кому:

<div class="col-md-4 tag-container">
  <div data-spy="affix" data-offset-top="60" data-offset-bottom="200">
    ...
  </div>
</div>