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

Question

我目前有一个侧边导航栏，该边栏会不断检查用户的滚动位置，如果它大于指定的.slide高度，则会在侧边栏上的某个div上添加一个.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');
    }
}); 

Answer 1

我试图为您提供代码帮助，然后我意识到它有多难，所以我知道它可能不是您真正想要的，但是我建议您使用一个出色的jQuery插件，它可以非常快速地解决您的问题： http：/ /imakewebthings.com/jquery-waypoints/