Ошибка загрузки Bootstrap 3 аффикса

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;
}

Я делаю что-то неправильно здесь? Это ошибка или работа по назначению? Нужно ли вручную проверять высоту строки и только прикреплять панель инструментов, если содержание выше, или есть лучший способ избежать этого? Должен ли я записывать отчет об ошибке?

Ответы

Ответ 1

Это может быть ошибка начальной загрузки. Ошибка уже существует.

Ошибка в модуле Bootstrap Affix.js, Affix.prototype.getState

if (offsetTop != null && this.affixed == 'top') return scrollTop < offsetTop ? 'top' : false

Чтобы исправить это. замените на код ниже.

if (offsetTop != null && this.affixed == 'top') return scrollTop <= offsetTop ? 'top' : false

Все это может быть моей неправильной мыслью

Ответ 2

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

$( '#nav' ).on( 'affix.bs.affix', function(){
    if( !$( window ).scrollTop() ) return false;
} );

Это проверка, действительно ли окно прокручивается. Я загружаю файлы bootstrap с CDN, поэтому редактирование оригинала не было возможным.

Как отметил @kolunar в своем ответе affix.bs.affix, он запускается непосредственно перед прикреплением элемента, поэтому мы можем предотвратить это, когда мы еще не прокручиваем, возвращая false

Ответ 3

У меня почти такая же ошибка. Класс affix-top заменяется классом аффикса при щелчке. Нажмите еще раз, и снова появится appix-top. В моем случае это касается affix-bottom.

старая ошибка еще не разрешена https://github.com/twbs/bootstrap/issues/4647#issuecomment-8769678

Ответ 4

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

bottom: $(document).height() - row.offset().top - row.height() - 1

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

Ответ 5

Надеюсь, что это исправить вашу проблему.

    var _toolbar = $('.toolbar');
    var _content = $('.content');
    _toolbar.on('affix.bs.affix', function () {
        if (_toolbar.height() > _content.height()) {
            return false;
        }
    });

Примечание: affix.bs.affix Это событие срабатывает непосредственно перед тем, как элемент были прикреплены.