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

如果你使用关键字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试图在3000px的距离内将你的值从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/

在Scroll上获取Scroll菜单文本，从正常重量变为粗体再到正常

1 个答案:

更新