0

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

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

<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>
4

1 回答 1

0

在这个小提琴中，如果您使用关键字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，例如滚动 1500 像素时的字体粗细应该是 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/

于 2014-03-12T19:20:40.497 回答