视差一页网站菜单栏

Question

关于此网站的其他问题：流动性当滚动浏览网站时，菜单项应该随着它经过的每一张幻灯片而改变。此时，即使滚动到几张幻灯片，最后一次单击的菜单项也会高亮显示。有没有一种简单的方法可以在CSS中实现这一点？或者，只需在JavaScript中添加几行，或者制作一个全新的jQuery.nav.js并在index.html中添加一个链接，就可以实现这一点吗？

Answer 1

由于您似乎刚起步，我建议您使用类似waypoints.js的JavaScript插件。

这个链接有一个很好的教程：http://www.oxygenna.com/tutorials/scroll-animations-using-waypoints-js-animate-css.

这是另一个关于做你想要实现的事情的教程：http://webdesign.tutsplus.com/articles/create-a-sticky-navigation-header-using-jquery-waypoints--webdesign-6408

Answer 2

您可以添加类似的内容，将data-scroll添加到每个导航锚点，并将data-anchor添加到每个幻灯片div ie

HTML:

       <a href="#" data-scroll=slide1>
       <a href="#" data-scroll=slide2>
        .
        .
        .
       <div id="slide1" data-anchor=slide1>
       <div id="slide2" data-anchor=slide2>
        .
        .
        .

脚本：

window.addEventListener( 'scroll', function() {
        var scrollPos = $(this).scrollTop();
           $("div[data-anchor^=slide]").each(function(i) {
                var currentArticle = $(this).attr('data-anchor');
                if ($(this).position().top <= scrollPos + 60 ) {
                  $('#nav a').removeClass('active');
                  $('#nav a[data-scroll="'+currentArticle+'"]').addClass("active");
                }
            });
});