Twitter Bootstrap аффикс/scrollspy ширина и прокрутка вопрос

Question

я почти получил все это работать: http://firestream.net/2013/index.php?go=stats

Вот две проблемы я имеющие:

1), как вы прокрутите вниз я бы как список боковой нав, чтобы остаться на самом верху экрана, не там, где он остается в настоящее время 2) ширина списка нав хлюпает, как вы прокрутите вниз

<div class="row"> 
    <div class="span3"> 
     <ul class="nav nav-list" id="sidenavbar"> 
       <li class="active"><a href="#top10pt"><i class="icon-chevron-right"></i> Top 10 Pages Today</a></li> 
       <li class=""><a href="#top10pa"><i class="icon-chevron-right"></i> Top 10 Pages Alltime</a></li> 
       <li class=""><a href="#daily"><i class="icon-chevron-right"></i> Daily Stats</a></li> 
       <li class=""><a href="#top10rt"><i class="icon-chevron-right"></i> Top 10 Referalls Today</a></li> 
     </ul> 
    </div> 

    <div class="span9" id="content"> 
     <section id="top10pt"> 
     ... 
     </section> 
     <section id="top10pa"> 
     ... 
     </section> 
     <section id="daily"> 
     ... 
     </section> 
     <section id="top10rt"> 
     ... 
     </section> 
    </div> 
</div> 

<script> 
$('#sidenavbar').affix(); 
$('body').scrollspy(); 
</script> 

Любая помощь или совет, было бы здорово!

Answer 1

Используя следующий CSS, #sidebarnav будет размещен, когда плагин аффикса добавит класс .affix к элементу. Класс .affix сделает фиксированное позиционирование и, как уже упоминалось в документах, вы должны сделать позиционирование самостоятельно.

#sidebarnav.affix { 
    top: 56px; 
} 

read the docs: Вы должны управлять положением стержневого элемента и поведением его непосредственным родителя. Позиция контролируется аффиксами, аффикс-верхом и аффикс-дном. Не забудьте проверить потенциально свернутый родительский объект, когда аффикс запускается, поскольку он удаляет контент из обычного потока страницы.

Answer 2

Мне недавно приходилось решать подобные проблемы с помощью моей scrollspy.

Во-первых, к элементу должен применяться класс аффикса. Причина в том, что функция scrollpy будет искать этот класс и изменить его с аффикса на аффикс-вершину в зависимости от того, где находится пользователь на странице или был ли загружен только документ. Это поможет решить проблему с позицией, поскольку объект scrollspy будет находиться в режиме обычного документа, пока пользователь не начнет прокрутку.

• Примечание. Обязательно сделайте селектор цепочки для объекта, если присутствует класс аффикса, чтобы вы могли позиционировать его вдали от самой верхней части страницы. Что-то вроде ul.nav.affix: {top: ## px;} работал хорошо для меня.

Во-вторых, когда применяется аффикс, вы удаляете его из нормального потока документов, потому что позиция: фиксированная; применяется. Если вы определяете ширину вашей scrollspy с помощью относительной единицы, она будет сдвигать ее ширину, потому что отношение между шириной scrollspy и ее родительской переменной изменилось (у нее есть другой родитель и больше не содержится вами) span-3 'ul).