webNiki

Olá Pessoal, Consegui fazer um menu fixo para deslizar sobre uma pagina inteira web, porem não estou estou conseguindo fazer o seguinte efeito: Como faço para uma das opções do menu ficarem destacadas enquanto vou para outra sessão? Suponha que no meu site, após o menu tenha a seção do home, noticias e contato, e quando eu rolar pela pagina o menu destacar a opção que seja da seção que estou. Como faço? Segue o código: /** .html **/ <nav id="menu" class="fixed-nav"> <div id="Navigation"> <ul class="menu unfixed""> <li class="button" id="#"><a href="#" class="link-menu">Home</a></li> <li class="button" id="#"><a href="#" class="link-menu">Sobre</a></li> <li class="button" id="#"><a href="#" class="link-menu">Notícias</a></li> </ul> </div> </nav> /** .cs **/ #menu{ margin-top: 0px; margin-right:0; } #menu ul li { display: inline; } #Navigation { position:relative; margin-left: 0px; margin-top: 0px; margin-right:0; background-color:#66f; width:100%; height:40px; box-shadow: #000 2px 2px 1px; } #Navigation ul.menu li.button { float:top; text-decoration:none; } #Navigation ul.menu li.button { float:top; text-decoration:none; } #Navigation ul.menu li.button a { display:inline-block; width:100px; line-height:10px; color:#fff; text-decoration: none; font-family:"Arial", sans-serif; text-align:center; padding:5px; padding-left:5px; padding-right:5px; margin:10px 30px 20px 10px; } #menu ul li a:hover { border-bottom:3px solid #fff; height:18px; border-top-width: 0; border-right-width: 0; border-left-width: 0; } .fixed-nav{ position:fixed; width:100%; top:0; left:0; z-index:999; } #Navigation .menu{ margin-top:0; } #Pag2{ margin-top: 50px; } div.quadro { position:relative; width: 100%; height:100px; margin-right:0; padding:20px; background-color:#f66; } /** .js **/ $(function(){ if($(window).scrollTop > $('#Pag2').offset().top){ $('#menu').addClass('fixed-nav'); }else{ $('#menu').removeClass('fixed-nav'); } $(window).scroll(function(){ if($(this).scrollTop() > $('#Pag2').offset().top){ $('#menu').addClass('fixed-nav'); }else{ $('#menu').removeClass('fixed-nav'); } }); });