2016-11-16 2 views
0

У меня возникли проблемы с использованием плагина Bootstra Affix. Я хочу, чтобы мое боковое меню было прикреплено, но всегда оставалось ниже заголовка и над нижним колонтитулом моего документа, поэтому я использовал атрибуты данных HTML5 data-offset-top и data-offset-bottom, чтобы сохранить меню вдали от обоих.Позиция прикрепленной боковой панели не изменяется

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

Вот CodePen. Как это можно решить?


EDIT:

После некоторой отладки, я заметил, что проблема, как представляется, связано с affix-bottom быть достигнуто и position:relative стиль применяется. При прокрутке назад, стиль сбрасывается на это, позиция не изменяется.

Это какая-то особенность или ошибка в скрипте Bootstrap?

+0

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

+0

Я не уверен, что он прав. В моем примере родительский элемент представляет собой столбец 'right col-md-6', который заканчивается перед нижним колонтитулом. Не используя опцию «offset-bottom», меню просто прокручивается над нижним колонтитулом и не останавливается перед ним. –

ответ

0

Я до сих пор не знаю, является ли поведение, описанное в моем вопросе, «предназначенной функцией» или ошибкой. Однако я смог решить проблему со следующей работой.

Как описано в редакции моего вопроса, проблема связана с тем, что position:relative применяется в состоянии affix-bottom, но не удаляется при переключении пакета на affix. Поэтому я просто добавил обработчик событий, чтобы полностью удалить все встроенные стили при переключении на состояние affix. Просто добавьте следующий код в JS используется в CodePen:

$('.right_box').on('affixed.bs.affix', function() { 
    $this = $(this); 
    $this.removeAttr('style'); 
}); 

Конечно, это временное решение должно применяться только тогда, когда не используются никакие другие встроенные стили.

Возможно, это решение может помочь кому-то другому, как сталкивается с той же проблемой. Если есть решение real, я был бы рад узнать об этом :)