So here's what I did for you. I made many slide and with their height I can know when the user change of slide. When he does that, I remove the class .current
and I put it to the next li
. For the moment, it only works when you're scrolling down, but with some adjustment you could easily do the samething while the user scroll up.
My Javascript look like this :
$(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');
}
});