Menu ul style change on arrive to div

[John]

I have simple menu with uls inside it, and I would like to change the ul's style(with css) while the page arrive to a div(in content), I mean onscrolling and arriving to that div.For example, I have this code:css files\[code\]#menu { background-color: #ccc; width:100%;}.menutext { padding:25 40 30 !important; display:inline-block;}.menutext2 { padding:25 40 0 !important; display:inline-block; color:red;}.alldivs { width:300px; height:200px; background-color:a9a9a9;}\[/code\]HTML\[code\]<div id="menu"> <div class="menutext">Change the style of me to .mebutext2 on arriving to DIV1</div> <div class="menutext">Change the style of me to .mebutext2 on arriving to DIV2</div> <div class="menutext">Change the style of me to .mebutext2 on arriving to DIV3</div></div><br><br><br><div class="alldivs"><div id="DIV1">DIV1</div></div><br><br><br><br><div class="alldivs"><div id="DIV2">DIV2</div></div><br><br><br><br><div class="alldivs"><div id="DIV3">DIV3</div></div><br><br><br><br>\[/code\]this is mycode http://jsfiddle.net/vu7Hh/Shortly:When I scroll and arrive to the to the top of DIV2 for example the second ul in the menu style change to .menustyle2(in different words it becomes red).So I think I should use jQuery here to do that.