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

Question

我想为我的一个滚动密集型网页上的不同部分创建一个侧边导航栏。我想做的是让导航栏指示正在查看网站的哪个部分。这方面的一个例子是http://www.ifc.com/back-to-portlandia/#welcome。当浏览网站的相应部分时，右侧的导航栏带有六个圆形按钮，分别标记为 1 到 6，实际上每个按钮都会变成橙色。

我该怎么做？

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