Question

因此，您的页面由各个部分组成，每个部分都有一个唯一的ID或锚点，您希望在滚动时使用当前部分的ID /锚点更新浏览器的URL。

PS我不是在问一个问题，而是分享一个食谱。所有相关的代码示例和演示都在答案中，所以请不要投票反对这个问题。

Answer 1

Skrollr可以实现这一点！但是你需要帮助他。

首先，创建一个包含页面部分链接的菜单：＆GT;

<nav><ul>
  <li><a href='#home'>Home</a></li>
  <li><a href='#about'>About</a></li>
  <li><a href='#goods'>Goods</a></li>
  <li><a href='#services'>Services</a></li>
</ul></nav>

使用Skrollr <li>将每个data-anchor-target绑定到相应的网页部分（有关信息，请阅读this）。然后添加一些Skrollr过渡：

<li
  data-anchor-target="#about"
  data--200-center-bottom="opacity: 0.2;"
  data--200-center-top="opacity: 1;"
  data-200-center-bottom="opacity: 1;"
  data-200-center-top="opacity: 0.2;"
>

从现在开始，Skrollr会将skrollable-between类名应用于那些<li>元素，其相应的页面部分当前在页面上可见。而且我们会利用这个功能！：d

初始化Skrollr时，您可以为render参数指定回调。滚动期间将触发此回调。在该回调中，您需要：

检索当前活动菜单项的列表（具有skrollable-between类名的人）。
确定要考虑当前的哪些活动菜单项。如果只有一个活动项目，那么选择是显而易见的。如果有多个，我建议您选择第二个。
检索当前菜单项链接的href属性的值。
使用该值更新浏览器网址。

请注意，Skrollr劫持了在页面加载时将页面滚动到当前项目的vanilla浏览器行为。所以我们必须解决这个问题。更糟糕的是，Skrollr在页面加载时多次执行render回调，将浏览器的URL哈希值重置为第一页面部分的哈希值。要解决此问题：

在初始化Skrollr之前，请从浏览器的URL中读取哈希值。
设置一个500-1000毫秒的计时器，该计时器将重置哈希滚动页面到相应部分的开头。最简单的方法是使用the click method插件的skrollr-menu。

计时器方法有点难看。如果您有更好的想法，请发表评论here。

您必须解决的另一个问题是Skrollr在滚动期间每秒执行render次回调数百次。你绝对不希望你的回调运行那么多：这完全没必要，并且会降低浏览器的速度。

所以你需要限制你的回调。如果您碰巧在项目中使用标准库扩展插件，例如Lo-Dash，请使用它的throttle方法。如果你没有，你可以使用微小的jquery.timer-tools插件。

这是一个包含以上所有内容的演示，用舒适的CoffeeScript编写：

演示：http://jsbin.com/gozota/7
来源：http://jsbin.com/gozota/7/edit?html,css,js

使用Skrollr滚动时更新浏览器的URL哈希id /锚点

1 个答案: