Javascript 修改侧导航，突出显示查看页面的哪个部分

我现在有一个侧边导航栏，它不断检查用户的滚动位置，如果它大于指定的.slide高度，它会在侧边栏的某个div中添加一个class.current，使其变成橙色，从而指示用户在页面的哪个部分。目前，该代码仅适用于.slide的一个特定高度，但我想对其进行修改，以便每个幻灯片（即幻灯片红色、幻灯片绿色、幻灯片蓝色，它们是带有彩色背景的div）可以具有不同的高度，因为我的每个部分的内容长度都会有所不同

小提琴可以找到

JavaScript:

    $(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');
    }
}); 

$（文档）。滚动（函数（）{
如果（$（窗口）.scrollTop（）>$（'.slide'）.height（）*$（'.current'）.index（））{
$（'.current'）.removeClass（'current'）；
var newSlide=Math.floor（$（window.scrollTop（）/$（'.slide'）.height（））；
$（'.sidenavigation li:eq（'+newSlide+'））.addClass（'current'）；
}
如果（$（窗口）.scrollTop（）<$（'.slide'）.height（）*$（'.current'）.index（））{
$（'.current'）.removeClass（'current'）；
var newSlide=Math.floor（$（window.scrollTop（）/$（'.slide'）.height（））；
$（'.sidenavigation li:eq（'-newSlide-'））.addClass（'current'）；
}
}); 

我试图帮助您编写代码，然后我意识到这有多困难，所以我知道这可能不是您真正想要的，但我向您推荐一个很棒的jQuery插件，它可以非常快速地解决您的问题：

这似乎可以工作，但我的问题没有简单的解决方案。我只是想为每张幻灯片编写四个独立的代码，并测试是否只将.current添加到一个边栏div（每个代码都有每个背景div的id的高度），但我的JavaScript能力不够，无法编写它。这不会有多大的效率。代码的性能会非常差，因为每个像素滚动都会检查四个独立的代码。您可以只执行多个if语句，每个if语句检查一个独立的幻灯片，但仍然全部在一个滚动代码中吗？