Откуда в affix (Bootstrap), появляется триггер класса на нижней границе?

Question

[Павел Мышкин]

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

$('#float-nav').affix({
    offset: {
        top: 200
        , bottom: 1000 // - тут
    }
});

либо в html
data-offset-bottom="1000"
то включается какой-то триггер и при дальнейшей прокрутки вниз у этого сайдбара быстро меняется класс affix на affix-bottom и снова afffix и т.д. Если бы он просто переключился на affix-bottom - то все работало идеально, но увы.
jsfiddle.net/pazys/2QDd4/11 - вот пример, только окошко [result] растянуть больше 991px по ширине.

Проблема наблюдается как во 2-ом так и 3-ем бутстрапе. С верхней границей проблем нет.

Кто как решил? Может есть подобный (только рабочий) вариант подобного ползучего блока?

Answer 1

[Павел Мышкин]

Вообщем после вышеуказанного началось другое - этот сайдбар уже не отлипал от низа при прокрутке наверх.

Рылся везде - нашел модифицированный бутстрап 3.1.1 - с ним все работает без бубнов и танцев.

Answer 2

[Юрий Лобанов]

В общем, проблема у Вас во-первых в том, что Вы неправильно прописали классы, точнее не прописали их вообще. affix и affix-bottom должны быть прописаны, примерно так:

#float-nav.affix {
  top: 0;
  background: #900;
}
#float-nav.affix-bottom {
  position: absolute;
  top:auto;
  bottom: 1000px;
}

Вторая проблема в том, что offset-bottom и значение bottom у класса affix-bottom не должно совпадать. Точнее сказать так: в реальном примере (что не отражено в документации bootstrap) появляются поправки. Я приведу пример из своей практики: навбар, которые должен был фиксироваться, имел верхний и нижний паддинги в 10px, поэтому я вводил поправку в 20px. То есть в css у меня было 450px, а в js 470. Соответственно, потом я отключал этот паддинг и убирал поправку - и тоже все работало.
Вычислить это поправку у Вас я не смог, но дело точно в ней. Я когда-то долго мучился, пытаясь понять что делаю не так, и решил вопрос в итоге.
Попробуйте на свежую голову посмотреть, возможно найдете причину.
Можете погуглить: bootstrap affix blinking - этим вопросом задаются многие. Вам советую искать решение на готовом примере.

Comments

[Павел Мышкин]

У .affix-bottom не надо указывать top и bottom, т.к. скрипт высчитывает top для этого класса. Тоесть достаточно .affix-bottom {position:absolute;}

[Павел Мышкин]

В итоге как ни крути - не работает по-нормальному