0

我有一个导航和部分如下..

<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有人吗？

4

2 回答 2

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

于 2013-06-24T13:32:08.403 回答
1

有一个名为One Page Nav的jQuery 插件，只需少量配置即可满足您的所有需求。

只需确保在设置changeHash: true时设置散列更改即可。

于 2013-06-24T13:29:12.917 回答