페이지의 어느 부분을 볼 수 있는지를 보여주는 사이드 위빙

Question

단순히 스크롤 집중적 인 웹 페이지 중 하나의 다른 섹션에 대해 사이드 바빙 바를 만들고 싶습니다. 내가하고 싶은 것은 네비게이션 바를 통해 사이트의 어느 부분이 보여지고 있는지 알려주는 것입니다. 예를 들면 http://www.ifc.com/back-to-portlandia/#welcome입니다. 웹 사이트의 해당 부분을 볼 때 6 개의 원형 버튼이 1에서 6 개의 레이블이 붙은 오른쪽의 탐색 표시 줄이 실제로 오렌지로 바뀝니다.

어떻게하면됩니까?

Answer 1

내가 한 일은 여기에 있습니다. 나는 많은 슬라이드를 만들었고, 높이를 가지고 사용자가 언제 슬라이드를 바꿀지 알 수 있었다. 그가 그렇게 할 때, 나는 클래스 .current을 제거하고 나는 다음에 그것을 넣는다 li. 잠시 동안은 스크롤 할 때만 작동하지만 일부 조정을하면 사용자가 스크롤하는 동안 쉽게 할 수 있습니다.

$(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'); 
    } 
});