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

Question

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

可以找到 fiddle here

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/