TL; DR: вот скрипка, щелкните или прокрутите, чтобы увидеть ошибку: http://jsfiddle.net/Tetaxa/6cC9w/
У меня есть страница с двумя столбцами, справа - прикрепленный div (панель инструментов), а слева - некоторый контент. Это отлично работает, когда контент выше, чем панель инструментов. Однако, когда панель инструментов выше, я получаю какое-то странное поведение. На прокрутке и щелчке на панели инструментов скрепленные состояния переключаются и содержимое обрушивается.
Вот соответствующий html:
<div class="row">
<div class="col-xs-8">
<p>Lorem ipsum dolor</p>
</div>
<div class="col-xs-4">
<div class="affixed-div">
Affixed
</div>
</div>
</div>
Вот мой javascript. Нижняя часть рассчитана для предотвращения перехода панели инструментов над нижним содержимым.
var div = $('.affixed-div');
var row = div.closest('.row');
div.affix({
offset: {
bottom: $(document).height() - row.offset().top - row.height(),
top: div.offset().top
}
});
И вот пользовательский css:
.affix {
top: 0;
}
.affix-bottom {
position: relative;
}
Я делаю что-то неправильно здесь? Это ошибка или работа по назначению? Нужно ли вручную проверять высоту строки и только прикреплять панель инструментов, если содержание выше, или есть лучший способ избежать этого? Должен ли я записывать отчет об ошибке?