javascript - 根据滚动到的部分设置 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 插件执行以下操作？

• 向下滚动页面时， View 中(有轻微偏移)部分的 url 哈希会添加到 url 中，即:滚动到第 1 部分 View 下方 30 像素会执行:http://www.site.com/#section-1
• 当它到达该部分时，它还应该更改 <li>该部分的内容出于用户体验目的而处于事件状态
• 最后，<li>应在导航中可点击，以便用户可以通过平滑滚动进入该部分。

希望有人以前做过这件事，如果有的话，有一个例子或者可以给我指出正确的方向。谢谢

更新:找到http://razorfish.github.io/Parallax-JS/但与其他JS相比太重了。我需要哪些部分才能实现这一点，而无需其他部分？ Jsfiddle 有人吗？

Answer 1

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以上支持。