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

Setting url hash based on section scrolled to?

本文关键字：设置 url 哈希 滚动      更新时间：2023-09-26

我有一个导航和部分，如下所示。。

<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
  • 当它到达该部分时，出于ux目的，它还应该将该部分的<li>更改为活动
  • 最后，<li>应该可以在导航中点击，这样用户就可以通过平滑滚动进入该部分

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

更新：找到http://razorfish.github.io/Parallax-JS/但它与其他JS相比太重了。在没有其他部分的情况下，我需要哪些部分才能实现这一点？Jsfddle有人吗？

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

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

只需确保在设置时为哈希更改设置changeHash: true即可。

相关文章：