javascript - 获取滚动菜单文本以从正常重量太粗到再次正常 onScroll

Question

我试图在屏幕上显示相应内容期间使菜单项显示为粗体，然后在该内容滚动过去后恢复正常。

我已经尝试了很多方法来做到这一点，但它似乎并没有奏效。我可以在适当的时候让它变粗，但是当我尝试添加属性让它恢复正常时，它完全停止工作。这是我尝试使用的当前方法:

<ol class="scroll-nav__list">
 <li class="scroll-nav__item1" data-0="font-weight:400;" data-3000="font-weight:700;"
data-4100="font-weight:400;">
  <a href="#learn" data-menu-top="1800">Learn</a></li>
</ol>

Answer 1

在这个 fiddle 中，如果您使用关键字 http://jsfiddle.net/JM8aQ/，它会完美地工作如果你使用数值 http://jsfiddle.net/EFnfT/1/ 的话，这真的很麻烦(检查控制台...它有时会跳到 500，有时会跳到 600，并且在向上滚动时通常什么都不做)

尝试用关键字替换数值:

<ol class="scroll-nav__list">
  <li class="scroll-nav__item1" data-0="font-weight:normal;" data-3000="font-weight:bold;" data-4100="font-weight:normal;">
    <a href="#learn" data-menu-top="1800">Learn</a>
  </li>
</ol>

如果您只想使用 400(正常)和 700(粗体)应该这样做。

---

更新

我又看了一眼……Skrollr 试图在 3000 像素的距离内将您的值从 400 更改为 700，例如滚动 1500px 时的 font-weight 应该是 550，因为 font-weight 属性不能取这个值，所以不能动画。

如果您仍然想使用数值，您可以使用以下内容并在 1px 的距离上“动画化”字体粗细。不过，这确实需要一些额外的标记。

<ol class="scroll-nav__list">
  <li class="scroll-nav__item1" 
    data-0="font-weight:400;"
    data-2999="font-weight:400;" 
    data-3000="font-weight:700;"
    data-4099="font-weight:700;" 
    data-4100="font-weight:400;
  ">
    <a href="#learn" data-menu-top="1800">Learn</a>
  </li>
</ol>

明白我的意思了http://jsfiddle.net/EFnfT/2/