Я пытаюсь воспроизвести поведение навигационного блока, которое можно увидеть на этой странице: http://www.nytimes.com/interactive/2013/10/10/garden/philadelphia-design.html?_r=1
Я смог наклеить окно на прокрутку (используя stickOnScroll и выделяя ссылки (используя этот трюк)... но я застрял, когда элементы под заголовком каждого раздела расширяются и сворачиваются по мере прокрутки пользователя.
Какой был бы эффективный и легкий способ сделать это?
Вы можете использовать компонент Bootstrap ScrollSpy или Affix - намного проще!
Это так же просто, как настройка элемента nav
так:
<nav class="col-xs-3 bs-docs-sidebar hidden-print">
<ul class="nav nav-stacked bs-docs-sidenav fixed" id="sidebar">
<li>
<a href="#Group1">Content 1</a>
<ul class="nav nav-stacked" id="sidebar">
<li><a href="#Group1Sub1">Sub-Group 1</a></li>
<li><a href="#Group1Sub2">Sub-Group 2</a></li>
</ul>
</li>
</ul>
</nav>
Затем добавьте контент в элементы section
:
<div class="col-xs-9">
<section id="Group1" class="group">
<h3>Group 1</h3>
<div id="Group1Sub1" class="subgroup">
<h4>Group 1 Sub 1</h4>
</div>
<div id="Group1Sub2" class="subgroup">
<h4>Group 1 Sub 2</h4>
</div>
</section>
</div>
И, наконец, это просто, как установка цели на #sidebar:
$('body').scrollspy({
target: '#sidebar'
});
Быстро издевается над примером: http://jsfiddle.net/LRCpp/6/
Документы: http://getbootstrap.com/javascript/