Sidenavigation突出了哪一部分页面被观看

Question

我想为我的一个滚动密集网页上的不同部分创建一个sidenavigation栏。我想要做的是让导航栏指示正在查看网站的哪个部分。一个例子是http://www.ifc.com/back-to-portlandia/#welcome。右边的导航栏上有六个圆形按钮，实际上每个都是橙色，当正在查看网站的相应部分时，它们每个都会变成橙色。

我该怎么做？

Answer 1

所以这就是我为你所做的。我做了很多幻灯片，他们的高度我可以知道用户何时更换幻灯片。当他这样做时，我删除了课程.current，然后将其放到下一个li。目前，它仅在您向下滚动时有效，但通过一些调整，您可以在用户向上滚动时轻松地执行相同操作。

Here's the fiddle

我的Javascript看起来像这样：

$(document).scroll(function() {
    if($(window).scrollTop() > $('.slide').height()*$('.current').index()){
        $('.current').removeClass('current');
        var newSlide = Math.floor($(window).scrollTop() / $('.slide').height());
        $('.navigation li:eq('+newSlide+')').addClass('current');
    }
});