Parallax One Page site menubar

Question

关于本网站的其他问题： mobiliteitsvisie 当滚动浏览网站时，菜单项应随每张幻灯片传递而改变。此时，即使滚动浏览到几张幻灯片，最后点击的菜单项也会突出显示。有没有一种简单的方法可以在CSS中完成这项工作？或者只能通过在JavaScript中添加几行或创建一个完整的新jQuery.nav.js并在index.html中添加一个链接来实现？

Answer 1

因为你似乎首先，我建议你使用一个JavaScript插件，如waypoints.js。

此链接有一个很好的教程：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即

HTML：

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

SCRIPT：

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

      }); 
});