Tweet
Segue um código de exemplo para quem precisa alterar o estilo de algum elemento ao rolar a página.
Código comentado em detalhes para que entendam facilmente ^^
Se gostou, clique em 
ali embaixo no canto direito 
Código comentado em detalhes para que entendam facilmente ^^
Código:
// Alterar elementos conforme rola a página, usando como exemplo a cor de fundo
// Execute a função com o manipulador "onscroll" na tag "body"
// Utilizar a tag "id=" do elemento, exemplo, para <div id="alterar"> e <div id="ancora"> ficaria assim:
// <body onscroll="efeitoScroll('alterar', 'ancora')">
function efeitoScroll(elemAlt, elemAnc){
// Declaração da função utilizando as seguintes variaveis
// elemAlt - Elemento à se alterar
// elemAnc - Elemento à ser usado como ancora
var corAtual ="NOME_DA_COR_OU_VALOR_EM_HEX",
// Declara corAtual com a cor de fundo inicial, altere "NOME_DA_COR_OU_VALOR_EM_HEX" pela cor inicial do elemento
corNova = "blue",
// Declara cor nova como azul
posAtual = document.documentElement.scrollTop || document.body.scrollTop ,
// Declara posAtual com o valor da posição vertical atual do scroll
posAlt = document.getElementById(elemAnc).offsetTop;
// Declara posAlt com o valor da posição vertical da ancora
if(posAtual >= posAlt){
// Se a posição atual é igual ou maior que a posição da ancora, então...
document.getElementById(elemAlt).style = "background-color: " + corNova;
// Transforma a cor de fundo em azul
}else{
// Se a posição atual é menor que a posição da ancora, então...
document.getElementById(elemAlt).style = "background-color: " + corAtual;
// Volta a cor para a anterior
}
}
ali embaixo no canto direito
Comment