Я хотел бы создать панель sidenavigation просто для разных разделов на одной из моих мощных веб-страниц с прокруткой. Я бы хотел, чтобы панель навигации указывала, какая часть сайта просматривается. Примером этого является http://www.ifc.com/back-to-portlandia/#welcome. Навигационная панель справа с шестью круговыми кнопками, расположенными с 1 по шесть, на самом деле кажутся оранжевыми, когда просматривается соответствующая часть веб-сайта.
Как мне это сделать?
Итак, вот что я сделал для вас. Я сделал много слайдов и с их высотой знаю, когда пользователь меняет слайд. Когда он это делает, я .current
класс .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');
}
});
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>