My website currently features a side navigation bar that dynamically updates based on the user's scroll position. When the user reaches a specific height, a class is added to a div in the sidebar, turning it orange and indicating which part of the page they are viewing. However, this setup only works for slides of a predetermined height. I would like to modify it so that each slide (e.g. red slide, green slide, blue slide with colored backgrounds) can have varying heights to accommodate different content lengths.
To see an example, you can check out the fiddle here
Here is the JavaScript code:
$(document).scroll(function() {
if($(window).scrollTop() > $('.slide').height()*$('.current').index()){
$('.current').removeClass('current');
var newSlide = Math.floor($(window).scrollTop() / $('.slide').height());
$('.sidenavigation li:eq('+newSlide+')').addClass('current');
}
if($(window).scrollTop() < $('.slide').height()*$('.current').index()){
$('.current').removeClass('current');
var newSlide = Math.floor($(window).scrollTop() / $('.slide').height());
$('.sidenavigation li:eq('-newSlide-')').addClass('current');
}
});