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哈希添加到网址，即：根据第1部分滚动到30px：http://www.site.com/#section-1
当它点击该部分时，它也应该将该部分的<li>更改为为ux目的而激活
最后，导航中的<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以上版本。

Answer 2

有一个jQuery plugin called One Page Nav，只需少量配置即可完成您需要的一切。

确保在设置时更改哈希值changeHash: true。

根据滚动到的部分设置url哈希？

2 个答案: