Bootstrap компонента навигации боковой панели + анимированный индикатор раздел

Question

Я пытался в течение нескольких недель, чтобы построить навигационную боковую панель, как эти образы:

Я использую twitter bootstrap, однако, хотя у их getbootstrap.com/компонентов есть очень хорошая навигационная панель, в их библиотеке нет такого компонента, и это так много боль, чтобы построить один. Поэтому я прибегал к использованию jquery в своей попытке построить его, как глобальный сайт Tommy Hilfiger.

Tommy Hilfiger's Global Site

Однако, я новичок в языке JavaScript и CSS ... они мои weakpoints ... особенно если они минимизированы :(и я застрял в попытке сделать стрелки маркера и иметь . это движение вдоль (оживляющий) и всегда указывает на текущий раздел мне удалось оживить страницы прокрутки, хотя, и мой WIP до сих пор находится здесь:

WIP - Twitter Bootstrap Navigation Sidebar

есть ли какие-либо открытые компоненты источника (или предпочтительно самозагрузки) для достижения этой анимации индикатора секции?

Я так запутался в своих сценариях, которые становятся более беспорядочными, поэтому компонент с открытым исходным кодом является очень желательным, однако любой ввод о том, как его достичь (с примером сценария, пожалуйста), также будет оценен. Большое спасибо заранее!

Answer 1

Заканчивать ScrollSpy компонент существует на самом загрузчике:

bootstrap scrollspy

извлеченным из:

https://stackoverflow.com/a/14366014/474330

Таким образом, вы должны использовать шпион прокрутки activate события, описанные здесь: http://twitter.github.com/bootstrap/javascript.html#scrollspy

В основном вам нужно некоторый код следующим образом:

$(function() { 
    var $spy = $('.nav.nav-pills'); 
    $spy.scrollspy({offset: 20}); 
    $spy.bind("activate", function(e) { 
    // do stuff here when a new section is in view 
    }); 
}); 

Вот рабочий пример: http://jsfiddle.net/hajpoj/f2z6u/3/

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