Bootstrap Affix не работает на мобильных устройствах

Я пытаюсь использовать аффикс Bootstrap для создания элемента во время affix внизу страницы и affix-top вверху страницы.

Я внедряю аффикс, и на рабочем столе он работает как шарм, но на мобильном устройстве он не работает. Я имею в виду: на мобильных устройствах нет переключения классов, и он всегда остается с классом affix-top.

Я использую этот код:

    <div class="affix-div" data-spy="affix" data-offset-top="197">
      <h1>Title</h1>
    </div>

и css:

.affix-div.affix {
    bottom: 10px;
    right: 10px;
    z-index: 9999;
}

Почему на мобиле не меняются классы??

(Извините за плохой английский)


person Silvia    schedule 13.07.2017    source источник


Ответы (1)


Аффикс начальной загрузки вычисляет смещение на основе высоты документа, прокрутки окна и смещения элемента. Одной из ловушек здесь является $(window).scrollTop. Согласно спецификации переполнения, если вы установите overflow ни к значениям visible, ни к clip, оно делает тело контейнером прокрутки, и scrollTop больше не будет работать, потому что теперь тело является контейнером прокрутки, и прокрутка действует внутри него, а не в окне.

Найдите свойства body overflow, overflow-x или overflow-y и установите значения visible. Если вам нужен эффект переполнения, просто оберните содержимое тела внутри другого элемента и установите там переполнение.

person cr1msaun    schedule 31.07.2017