根據滾動到的部分設置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條以下30PX作用：http://www.site.com/#section-1
• ，因爲它擊中的那款，它也應該將該部分的<li>更改爲主動用於用途
• 最後，<li>應該在導航欄中可點擊，以便用戶可以通過平滑滾動進入該部分。

希望有人以前做過這件事，如果有的話，有一個例子，或可以指出我在正確的方向。謝謝

更新：發現http://razorfish.github.io/Parallax-JS/但它與其他JS太重。我需要哪些位來實現這一點，而不用其他位呢？ Jsfiddle任何人？

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。