One page site. Link becomes active when at a specific anchor

Hi Everyone,

I'm building a one page site, and as you can see I'm a little confused about how to word what I'm looking for. I was wondering if anyone could help me.

The website will be a 1 page, smooth scrolling responsive site, with anchor tags to go to a specific place on the page. I will have a fixed header at the top of the page. I've done all these things before but what I want to do now is have the link on the fixed header highlight, when on that specific section.

For example: I've clicked the 'about' button in the fixed nav. It's smooth scrolled down to the about section (div). How do I make it so the about button is a different color in the fixed nav. And then when I scroll out of the about section and into a different div, it'll change back to the original, and then the next button eg. Contact will become highlighted. To see more clearly what I'm trying to explain please visit: http://www.theorydesign.ca/

Am I right in assuming this would be a javascript thing, or is it possible to do it in css? If anyone could point me in the right direction I'd be extremely grateful.

Thanks,

Nick