jQuery를 사용하여 현재 표시된 요소를 찾고 내비게이션을 업데이트하십시오.

Question

처음으로 여기에있는 사용자입니다. 나는 보통 질문에 대한 해답을 찾을 수 있지만이 것을 알아내는 데 어려움을 겪고있다.

목표 :

나는 페이지의 요소에 아래로 스크롤을 클릭 사이드 바 탐색 단일 페이지 레이아웃을 가지고있다. 그러나 사용자가 페이지를 특정 요소 #id으로 스크롤하면 내비게이션의 해당 링크가 .active이됩니다. 탐색 링크와 해당 요소는 element#id 및 a[name]을 통해 동일한 값을 공유합니다. 아래NikeBetterWorld.com

HTML 예 : 유사

<nav> 
    <a name="value">Link</a> 
</nav> 

<section id="value"> 
    content goes here 
</section> 

물론,이 등 이상의 섹션, 링크, 요소이다하지만이 그것의 요점이다. 따라서 사용자가 section#value으로 스크롤하면 a[value]이 (가) 활성화 된 클래스를 얻게됩니다.

다소 도움이되었지만 아직 몇 가지 문제가있는 답변을 찾았습니다. See this link for more information.

현재 자바 스크립트/jQuery를 :

$(document).scroll(function() { 
    var cutoff = $(window).scrollTop(); 
    var cutoffRange = cutoff + 200; 

    // Find current section and highlight nav menu 
    var curSec = $.find('.current'); 
    var curID = $(curSec).attr('id'); 
    var curNav = $.find('a[name='+curID+']'); 
    $(curNav).addClass('active'); 

    $('.section').each(function(){ 
     if ($(this).offset().top > cutoff && $(this).offset().top < cutoffRange) { 
      $('.section').removeClass('current') 
      $(this).addClass('current'); 
      return false; // stops the iteration after the first one on screen 
     } 
    }); 
}); 

문제점 :

위의 코드 내가 하나의 큰 문제로 실행하고 어느 정도 작동하지만. .current의 전체 요소를 가져 오는 데 문제가 있습니다. 요소의 맨 위가 창 밖으로 나 가면 클래스를 잃게됩니다. 나는 새로운 요소에 대한 범위를 추가하여이를 수정했다. 그러나 사용자가 위쪽으로 스크롤하면 이전 요소는 요소의 맨 위가 창 상단에 도달 할 때까지 .current 클래스를 얻지 못한다. 보이는 윈도우의 지배적 인 부분이 .current 클래스를 얻는다면 나는 그것을 선호 할 것입니다.

모든 도움, 아이디어 또는 제안을 주시면 감사하겠습니다.

미리 감사드립니다.

Answer 1

상단이 아닌 섹션의 하단을 확인하려는 것처럼 들립니다. 시도해보고 범위를 모두 제거하십시오.

if($(this).offset().top + $(this).height() > cutoff){ 

편집 : 바이올린을 만듭니다. 나는 이것이 당신이 묘사 한 것이라고 생각합니다.

http://jsfiddle.net/pdzTW/

Answer 2

yeeeahhh! 해결책을 얻었다!현재 섹션을 반환

if ($(window).scrollTop() >= $(section).offset().top) { 

if ($(window).scrollTop() + 80 >= $(section).offset().top) { 

Answer 3

난 항상 jQuerys을 사용하여 "필터"기능 :

난 그냥에서 변경할 수 있습니다.

$currSection = $('section').filter(function() { 
    var $this = $(this); 
    var offset = $this.offset().top; 
    var view = winHeight/2; 

    return scrollTop >= offset - view && offset + ($this.outerHeight() - view) >= scrollTop; 
}); 

같은 스크롤 리스너에 랩 :

$(window).on('scroll', function() { 
    // here we go ... 
}); 

그게 전부입니다.