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

      }); 
});