1

Preciso que, quando rolar a página, aplique css a div, exemplo:

Quando o usuário chegar na metade do site, ou no section desejado, aplique um CSS a partir deste ponto a uma div, conforme vai rolando a página para baixo, vai alterando o valor deste item no CSS, por exemplo, vai aumentando 1px o valor do left desta div a cada rolagem, dando a impressão que conforme rola a página, o item vai se movendo para o lado.

Alguém já precisou utilizar algo semelhante?

2

1 Resposta 1

1

Usando o .scroll() do jQuery você pode pegar a 'distancia' do topo com o .scrollTop() e definir as propriedades de acordo com esse valor. Ex:

$(window).scroll(function() {
    var x = $(this).scrollTop();
    $('#box').css('left', parseInt(+x) );
    if(x<100){
      $('#box').css('background', 'red' );
    }else if(x<200){
      $('#box').css('background', 'green' );
    }else{
      $('#box').css('background', 'blue' );
    }
});
#box{
    background:red;
    height:200px;
    width:200px;
    position:fixed;
    top:0px;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div style="height:1200px">
  <div id="box">
  </div>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .