Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Guinsilva

[Resolvido] Como mudar cor do link do menu depedendo da posição d

Por , em Javascript

Recommended Posts

Guinsilva    0

Guinsilva
Postado

Estou fazendo um site onde todo o conteúdo dele estará em apenas uma página e nele terá um menu de índice para cada categoria. No site precisa que a cor do menu mude de acordo com a posição da página, destacando o link da categoria que ele está visualizando no momento entretanto não encontrei nenhuma função JavaScript ou jQuery para isto.

Alguém saberia algum método de como fazê-lo?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

dá uma lida aqui:

http://www.maujor.com/blog/2009/08/12/destacar-link-para-pagina-corrente/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guinsilva    0

Guinsilva
Postado

Neste link são exemplos para site com mais de uma página, o que preciso é para site de apenas uma página onde uso âncora no menu para navegar no site.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

então no evento onclick de cada item seu, adicione uma classe css neste item. Lembrando de retirar ela dos demais.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guinsilva    0

Guinsilva
Postado

Preciso é que ele mude automaticamente destacando a matéria que a pessoa está lendo atualmente para o caso de que, se pessoa está descendo a barra de rolagem até a matéria seguinte, o menu mude e destaca ele.

Algo como acontece neste site (só que apenas mudando a cor): http://peeltheorange.com/

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

hum... então você tem q escutar o evento window.onscroll e o offsettop do teu elemento

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

coloquei os <br /> para criar a rolagem

 


<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<script type="text/javascript">
window.onscroll = function(){
	alert('ae');
}
</script>

o evento é disparado qndo a barra de rolagem, rola.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guinsilva    0

Guinsilva
Postado

Tinha colocado o script no header e não no final do site, por isso não tinha rodado. Obrigado pela ajuda.

Sabe se existe alguma forma para fazer o script funcionar colocando-o no header?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

você ta com o diagnostico errado.. funciona colocando no header sim

 

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>

<script type="text/javascript">
window.onscroll = function(){
	alert('ae');
}
</script>
</head>
<body>


<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</body>
</html>

 

para debugar e descobrir realmente o motivo de não ter funcionado, use o console de erros.

Ctrl+Shift+J no Firefox

 

http://wbruno.com.br/2011/03/31/como-debugar-javascript-firefox-erros-comuns/

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito