시차 원 한 페이지 페이지 메뉴 모음

Question

mobiliteitsvisie 사이트를 스크롤 할 때 메뉴 항목은 통과하는 모든 슬라이드마다 변경되어야합니다. 이 순간에 마지막으로 클릭 된 메뉴 항목이 여러 슬라이드로 스크롤 될 때에도 강조 표시됩니다. CSS에서 그 작업을 수행하는 쉬운 방법이 있습니까? 또는 JavaScript로 몇 줄을 추가하거나 완전히 새로운 jQuery.nav.js를 만들고 index.html에 링크를 추가하면됩니다.

Answer 1

당신이 것 때문에 시작하려면 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

당신은 이런 식으로 뭔가를 추가 DIV 즉

HTML 각 슬라이드에 각 탐색 앵커에 data-scroll 및 data-anchor을 추가 할 수 있습니다

이

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

      }); 
});