단일 페이지 탐색 메뉴 - 활성 표시

Question

jQuery 경유지를 사용하여 단일 페이지 웹 사이트에 대한 탐색을 업데이트하려고합니다.

보기의 현재 섹션을 기반으로 탐색을 업데이트하고 싶습니다. 탐색 링크를 사용하여 내려갈 때 잘 작동합니다. 내 문제는 현재 앵커가 있어야하는 위치 아래에있는보기에서 현재 섹션 위에있는 섹션으로 스크롤하려고 할 때입니다.

내 Demo을 참조하십시오.

jQuery를

$(document).ready(function(){ 
     $('section').waypoint(function(direction) { 
      thisId = $(this).attr('id'); 
      $('ul li').each(function(){ 
      var secondaryID = $(this).attr('class'); 
      if (secondaryID == thisId) 
       { 
        $('ul li').removeClass('active'); 
        $(this).addClass('active'); 
       } 
      }); 
    },{offset: '0'}); 
}); 
$('a[href*=#]:not([href=#])').click(function() { 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
     || location.hostname == this.hostname) { 

     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
      if (target.length) { 
      $('html,body').animate({ 
       scrollTop: target.offset().top 
      }, 500); 
      return false; 
     } 
    } 
}); 

HTML

<ul> 
    <li class="test"><a href="#test"></a></li> 
    <li class="test2"><a href="#test2"></a></li> 
    <li class="test3"><a href="#test3"></a></li> 
    <li class="test4"><a href="#test4"></a></li> 
    <li class="test5"><a href="#test5"></a></li> 
</ul> 
<section id="test"></section> 
<section id="test2"></section> 
<section id="test3"></section> 
<section id="test4"></section> 
<section id="test5"></section> 

업데이트

내가 다른 오프셋 (offset)와 함께 두 개의 웨이 포인트 기능을 사용하여 작업이있어 ​​그러나 이것은 분명히 최선의 해결책이 아닙니다.

http://jsfiddle.net/SJkmh/10/

I는 (방향)에 따라 동일한 기능 내에서 오프셋을 지정하는 방법을 찾으려

, I (1 & -1) 값과 오프셋 변수를 사용하지만, 불행히도 만 사용

+1.

http://jsfiddle.net/SJkmh/13/

Answer 1

이 시도 : your modified example

$(document).ready(function(){ 
     $('section').waypoint(function(direction) { 
      var me = $(this); //added 
      thisId = $(this).attr('id'); 
      $('ul li').each(function(){ 
      var secondaryID = $(this).attr('class'); 
      if (secondaryID == thisId) 
       { 
        $('ul li').removeClass('active'); 

        //added 
        if(direction==='up'){ 
         me = $(this).prev(); 
        } 

        //added 
        if(!me.length){ 
         me = $(this); 
        } 

        $(this).addClass('active'); 
       } 
      }); 
    },{offset: '0'}); 
}); 

UPD 확인 방법에 대한 this example :

아이디어는 다음과 같습니다

1) 우리는 히트 섹션 N 가기 테두리는 아래로 스크롤하는 동안 활성 섹션 beco를 의미합니다. 섹션 N + 1.

2) 섹션 N 위쪽 테두리를 누르면 위로 이동하면서 섹션 N이 활성화됩니다.

추신. 미안 내 영어

자바 스크립트

$(document).ready(function(){ 
     $('section').waypoint(function(direction) { 
      var activeSection = $(this); 
      if(direction === 'down'){ 
       activeSection = $(this).next(); 
      } 
      //activeSection = $(this); 
      var sectionId = activeSection.attr('id'); 
      $('ul li').removeClass('active'); 
      $('ul li.' + sectionId).addClass('active'); 
      console.log(activeSection); 
     }); 
}); 

$('a[href*=#]:not([href=#])').click(function() { 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
     || location.hostname == this.hostname) { 

     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
      if (target.length) { 
      $('html,body').animate({ 
       scrollTop: target.offset().top - (target.height()/5) 
      }, 500); 
      return false; 
     } 
    } 
});