Question

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

可以找到小提琴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/

修改Sidenavigation，突出显示页面的哪个部分被查看

1 个答案: