Jquery Underline on scroll

Question

아주 멋진 사이트에서 발견 된 피쳐 ive를 실험하고 싶지만 어디서부터 시작해야하는지 전혀 모른다.

http://adamrudzki.com/

특징은 아래로 페이지가 스크롤 걸쳐 이동 밑줄 원소이다. 여기에서 비슷한 것을 발견했습니다. Underlining menu item하지만 이드가 기능 향상에 도움을 주신다면 이드는 크게 감사하겠습니다. 아직 Jquery에 익숙하지 않습니다.

미리 감사드립니다.

Answer 1

예제 사이트에서 각 <a> 태그에는 밑줄 역할을하는 <span> 요소가 있습니다. 하지만 마크 업을 자르고 border-bottom을 대신 사용하는 것이 좋습니다. 기본적으로 여기서 재생되는 두 가지 이벤트 - scroll() 및 click()이 있습니다.

이 마크 업의 기본입니다 : 단지 강조하고 싶은,

<nav> 
    <a>Home</a> 
    <a>About</a> 
    <a>Portfolio</a> 
    <a>Contact</a> 
</nav> 
<div id="contents"> 
    <section>Home</section> 
    <section>About</section> 
    <section>Portfolio</section> 
    <section>Contact</section> 
</div> 

CSS 국경 :

a { 
border:0 solid #FFF; 
border-bottom-width:0; 
} 

jQuery를 scroll() 이벤트 :

$(window).scroll(function() { 
    //get the window scrollTop on scroll 
    var st = $(window).scrollTop(); 
    /* we use each() to iterate on every section and 
     check if the offset position is in relative condition to the 
     scrollTop value 
    */ 
    $('#contents section').each(function (index) { 
     var offsetTop = $(this).offset().top, 
      h = $(this).height(); 
     //this condition satisfies that this section is currently on the viewport 
     if (st >= offsetTop && st < offsetTop + h) { 
      /*find the nav <a> that has the same index to this section 
      currently on the viewport and 
      show its border-bottom by setting its width. 
      */ 
      $('nav a').eq(index).css({ 
       'border-bottom-width': '3px' 
      }); 
     } else { 
      //hide the border-bottom 
      $('nav a').eq(index).css({ 
       'border-bottom-width': '0' 
      }); 
     } 
    }); 
}).trigger('scroll'); 

탐색 <a>click() 이벤트 :

가 <a> 배치 위치를 탐색하기 위해 적절히 정렬되면, 우리는 정확한 <section>/<a> 타겟팅 index를 사용

$('nav a').click(function() { 
    /* click has no index argument compared to each() function 
    so we have to get it with index() */ 
    var index = $(this).index(), 
     $target = $('#contents section').eq(index); // find the target section 
    //animate scrolling to the target section 
    $('html, body').stop(true, true).animate({ 
     scrollTop: $target.offset().top 
    }, 'slow'); 
}); 

참고 용액이 제대로 작동 할 것이다.

이 샘플은 jsfiddle을 참조하십시오.