Unconfigured Ad Widget

Collapse

Anúncio

Collapse
No announcement yet.

Alterar estilo do elemento ao rolar a página

Collapse
X
 
  • Filter
  • Tempo
  • Show
Clear All
new posts

  • Font Size
    #1

    Tutorial Alterar estilo do elemento ao rolar a página

    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 ^^

    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
    }
    }
    Se gostou, clique em ali embaixo no canto direito

    Engenharia Social - Web Design - Programmer
    __________________________________________________ __________

    sigpic
    Similar Threads

  • Font Size
    #2
    boa mandou bem

    Comment

    X
    Working...
    X