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

Question

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

我该怎么做？

Answer 1

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

这是小提琴

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