섹션을 기준으로 URL 해시를 설정 했습니까?

Question

다음과 같이 내가 탐색 및 섹션이 ..

<ul id="nav"> 
    <li>section 1</li> 
    <li>section 2</li> 
</ul> 

<section id="section-1"> 
    <p>text</p> 
</section> 
<section id="section-2"> 
    <p>text</p> 
</section> 

은 JQuery와 플러그인과 함께 다음 내가 할 수있는 방법이 있나요?

페이지를 아래로 스크롤에

• 보기 섹션의 URL 해시가 URL에 추가, 즉 (약간은 오프셋 포함) : 섹션 1의 관점에서 아래 30 픽셀을 스크롤하는 수행합니다 http://www.site.com/#section-1
• 이 섹션 것을 안타 또한 해당 섹션의 <li>을 ux 목적으로 활성으로 변경해야합니다.
• 마지막으로 <li>을 탐색에서 클릭 할 수 있어야 사용자가 부드러운 스크롤로 해당 섹션으로 이동 될 수 있습니다.

호핑 누군가가 전에 이것을 한 적이 있다면, 예가 있거나 올바른 방향으로 나를 가리킬 수 있습니다. 감사합니다

업데이트 : 발견 http://razorfish.github.io/Parallax-JS/하지만 다른 JS와 너무 무겁습니다. 내가 할 수있는 다른 비트가 없으면 어느 비트를 사용해야합니까? 누구?

Answer 1

소량의 구성으로 필요한 모든 작업을 수행 할 수있는 jQuery plugin called One Page Nav이 있습니다.

해시 설정을 변경할 때 changeHash: true으로 설정해야합니다.

Answer 2

http://fiddle.jshell.net/dzqpG/5/show/light/

코드

$(window).on('scroll', function(){ 
    var scroll = $(this).scrollTop(); 
    if(scroll > 300){ 
    $('#section2').css('background','black'); 
    history.pushState(null, null, '#section2'); 
    } 
}); 

$('#nav').on('click','a', function(event){ 
    event.preventDefault(); 
    $('html, body').animate({ 
    scrollTop: $("#section2").offset().top 
    }, 2000); 
}) 

는 기준점으로 사용합니다. pushState는 위의 IE10에서만 지원됩니다.