스크롤 할 때 링크를 선택하는 방법은 무엇입니까?

Question

방문 페이지에 jquery 코드를 추가하는 데 문제가있어서 섹션 사이를 스크롤 할 때 clicked라는 클래스를 추가하여 관련 섹션이 navbar 링크에 표시되어야합니다. 현재 참조 용 코드 스 니펫을 추가했습니다. :-) 도움이 되었으면 좋겠습니다. :-)

$(document).ready(function(){ 
    $(".link").click(function(event){ 
     ------ Scroll code ------------ 
     $(".clicked").removeClass("clicked"); 
     $(event.target).addClass("clicked"); 
    }); 
}); 

Answer 1

onClick 이벤트 처리기를 추가 할 필요가 없습니다. 당신이 사용해야하는 접근 방식은 그렇게 어렵지 않습니다.

이

$(document).scrollTop(); 

그런 다음 당신이 실제로 스크롤 위치 + 높이입니다 보이는 부분의 바닥의 위치를 ​​알아야합니다

먼저 당신은 당신이 사용하여 검색 할 수있는 현재의 스크롤 위치를 알 필요가 윈도우의 :

var btm = $(this).scrollTop() + $(window).height(); 

이제 우리는 섹션 하단 부분 이상이면 위해 우리가 섹션의 위치를 ​​얻을 필요가 그렇게하기 때문에 (즉 그것은 볼 수의 의미)을 확인해야합니다. 당신은 사용하여 해당 작업을 수행 할 수 있습니다 여기에 어떻게됩니까

var titlePos = $($(myLink).attr("href")).offset().top; 

우리는 메뉴 바 링크에 의해 참조되며, 다음은 그가에 위치하고 곳의 위치입니다 (의 오프셋받을 섹션을 찾아 가고있는 것입니다 문서). left과 top 오프셋을 모두 얻을 수 있지만이 경우에는 top 오프셋 만 가져야합니다.

당신이 당신의 탐색에 모든 링크에 대해이 작업을 자동화 알고해야 할 유일한 것은, 당신은 수행하여, 예를 들어 그 작업을 수행 할 수 있습니다

$(".nav li a").each(function() { 
    var titlePos = $($(this).attr("href")).offset().top; 
}); 

다음 단계는 우리가 경우에 볼 거라고이다 제목의 위치가 화면의 맨 아래에있는 것은 해당 섹션이 보이거나 표시되었음을 의미합니다. 다음을 사용하여이를 수행 할 수 있습니다.

var btm = $(this).scrollTop() + $(window).height(); 
$(".nav li a").each(function() { 
    var titlePos = $($(this).attr("href")).offset().top; 
    if (titlePos < btm) { 
     $(this).addClass("visited"); 
    } 
}); 

이제는 한 가지 문제 만 있습니다. 화면 위에있는 섹션 (= 이미 전달/읽은 섹션)도 화면 하단에 있으며,이 코드를 사용하면 활성 상태가됩니다.

문제를 해결하려면 다음 섹션이 표시되는 순간 이전 링크에서 .visited 클래스를 삭제해야합니다. 다음과 같은 방법으로 사용하는 것을 수행 할 수 있습니다

$(this).parents("li").prev().children("a").removeClass("visited"); 

이 단지 활성화의 그것에서 .visited 클래스를 제거 링크하기 전에 링크로 이동, 그래서 실제로 마지막 눈에 보이는 부분은 볼로 표시됩니다.

이제이 모든 것을 scroll 이벤트 처리기에 추가하고 한 번 트리거하여 탐색을 초기화하십시오. 내가 스크롤 할 때 내가 먼저 탐색 링크에서 .visited 클래스를 제거,

$(this).scroll(function() { 
    var btm = $(this).scrollTop() + $(window).height(); 
    $(".nav li a").removeClass("visited").each(function() { 
     var titlePos = $($(this).attr("href")).offset().top; 
     if (titlePos < btm) { 
      $(this).addClass("visited"); 
      $(this).parents("li").prev().children("a") 
       .removeClass("visited"); 
     } 
    }); 
}).trigger("scroll"); 

는 또한 작은 변화를주의 사항 : 코드는 무언가 같이 될 것입니다. 나는 이것을 또한 보여주는 JSFiddle을 만들었다.