This is a scrolling site that uses parallax and stellar.js, based on this. The "d" logo on the left side, the top navigation, and the square arrow button at the bottom - are all supposed to change color based on which panel you're on, whether manually scrolling or clicking via the top navigation. The color changes are supposed to happen in reverse order, too.

In IE9 the logo and the bottom arrow button don't change color on scroll UP (manually or via nav). I've searched but can't for the life of me figure out why this hangs up in IE9. Can anyone offer any insight?

I put it into a jsfiddle and stripped out anything unnecessary:

(Arrgh! In the transition somehow the "d" logo stopped changing. I'll update it once I get it working.)

This site was built in a super mega rush and the code isn't at its best, but constructive criticism is welcome. Thanks so much in advance!