Change li background on nav using waypoints

Question

My jquery knowledge is soft at best.

I cant figure this out. Basically I have a simple sticky horizontal nav bar using UL LI on a long page. I want the nav bar li items to change color depending on what section of the page they are viewing. Similar to this page http://www.pandlmedia.com/index.php/index_new but only its horizontal and instead of the link changing color I want the entire bg of the li item to change white.

I am attempting to toggleclass on the .menu ul li a item to a new class .menuwhite ul li a to change the background from blue to white but its not working. Any help into what I'm doing wrong here?

Fiddle: http://jsfiddle.net/Z2rRt/

    $(".wphistory").waypoint(function(event, direction) {
       if (direction === 'down') {
         $('#menu').toggleClass('menuwhite');
       }
       else {
         $('#menu').removeClass('menuwhite');
       }
    });
});

Answer 1

I noticed two things. That event parameter seems to be screwing the function. And also, which is a big question, why do you toggle class on #menu when your div is actually .menu ? :) (class not ID). Additionally:

http://jsfiddle.net/Z2rRt/3/