Я использую Twitter Bootstrap, и у меня есть следующее:
<div class="row">
<div class="span3">
<div data-spy="affix">
<form>
<!-- inputs and stuff -->
</form>
</div>
</div>
<!-- span9 and its contents -->
</div>
Bootstrap правильно применяет эффект аффикса на <div>
, и он остается неподвижным, когда я прокручиваю страницу вниз. Однако, как только я изменил размер страницы на мобильные размеры и загрузочные эффекты реагирования, (привязка к навигационной панели/объекты хорошо выравниваются друг под другом), прикрепленный <div>
теперь поверх других элементов страницы и становится беспорядочным. Это происходит потому, что .affix
имеет position: fixed
, что очень хорошо объясняет это.
Теперь я перешел на веб-сайт Bootstrap и изменил размер страницы на мобильные размеры, прикрепленный элемент (<ul>
в их случае) начинает хорошо ладить со страницей, занимая свое естественное место, не переходя на другие элементы. Я также заметил, что как только это произойдет, класс изменится с affix
на affix-top
.
Я не уверен, что это их настройка или часть этого фреймворка, потому что структура, по-видимому, не ведет себя одинаково. Может ли кто-нибудь уточнить это? Мне нужно иметь такое же поведение на моем <div>
, где, если страница будет изменена до мобильных размеров, прикрепленный элемент займет свое естественное место.
Изменить: Мое наблюдение немного испорчено. Я заметил, что элемент на своей странице изначально имеет affix-top
, и после прокрутки ниже data-top-offset
он изменяется на affix
. Он по-прежнему не объясняет, почему мой <div>
не будет отображаться как их <ul>
при изменении размера.