Get Scrollr menu text to go from normal wieght to bold to normal again onScroll

Question

I'm trying to make menu items appear bold during the period that the corresponding content is being displayed in the screen, then go back to normal after that content is scrolled past.

I've tried a number of ways of doing this, but it doesn't seem to be working. I can get it to go bold at the right time, but when I try to add the attribute to get it to go back to normal, it stops working completely. Here's the current method I'm attempting to use:

<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

In this fiddle it works perfectly if you use keywords http://jsfiddle.net/JM8aQ/ and it's real buggy if you use numeric values http://jsfiddle.net/EFnfT/1/ (check the console... it sometimes jumps to 500, sometimes 600 and usually does not do anything, when scrolling back up)

Try substituting the numeric values with keywords:

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

If you only want to use 400 (normal) and 700 (bold) that should do it.

---

UPDATE

I took another look... Skrollr tries to change your value from 400 to 700 over a distance of 3000px, e.g. the font-weight when scrolled 1500px should be 550, since the font-weight property can't take this value, it can't be animated.

If you still want to use numeric values, you could use the following and "animate" the font weight over the distance of 1px. This does require a little extra markup though.

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

See what I mean here http://jsfiddle.net/EFnfT/2/