Sidenavigation, который выделяет какую часть страницы просматривается

Question

Я хотел бы создать панель навигации просто для разных разделов на одной из моих веб-страниц с интенсивной прокруткой. Я хотел бы, чтобы панель навигации указывала, какая часть сайта просматривается. Примером этого является http://www.ifc.com/back-to-portlandia/. Панель навигации справа с шестью круглыми кнопками, помеченными цифрами от 1 до 6, на самом деле каждая становится оранжевой, когда просматривается соответствующая часть веб-сайта.

Как бы я это сделал?

Answer 1

Вот что я сделал для тебя. Я сделал много слайдов и по их высоте могу узнать, когда пользователь сменит слайд. Когда он это делает, я удаляю класс .current и я положил его на следующий li, На данный момент, это работает только при прокрутке вниз, но с некоторой регулировкой вы можете легко сделать то же самое, когда пользователь прокручивает вверх.

Вот скрипка

Мой Javascript выглядит так:

$(document).scroll(function() {
    if($(window).scrollTop() > $('.slide').height()*$('.current').index()){
        $('.current').removeClass('current');
        var newSlide = Math.floor($(window).scrollTop() / $('.slide').height());
        $('.navigation li:eq('+newSlide+')').addClass('current');
    }
});