2

Gostaria de quando alguém rolar a pagina e chegar em uma determinada DIV a cor de fundo da mesma mudasse tentei fazer assim:

JsFiddle

mas não deu certo. Qual seria a forma correta de se fazer?

Obs: O site sera responsivo logo scrollTop: 50px não iria funcionar!

1 Resposta 1

2

Já havia respondido questão semelhante aqui.

Para fazer isso, tem que calcular a distância do elemento até o topo do documento menos o scroll, e subtrair pela altura visível da janela.

Adicionei uma variável aparecer que é a porcentagem em que o elemento estiver visível na janela para alterar a cor de fundo:

$(window).on("scroll",function(){
	var aparecer = 50; // porcentagem (neste caso, é a metade, 50%)
	var eleHeight = $('#div').outerHeight(); // altura da div
	var eleTopo = $('#div').offset().top; // distancia da div ao topo do documento
	var scrlTopo = $(window).scrollTop(); // quanto foi rolada a janela
	var distance = eleTopo-scrlTopo; // distancia da div ao topo da janela
	var altJanela = window.innerHeight; // altura da janela

	if(distance <= altJanela-(eleHeight*(aparecer/100))) {
		$("#div").css("background","blue");
	}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Role para baixo
<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br />
<div id="div" style="display: block; width: 300px; height: 200px; background: red;">
	Texto texto texto texto
</div>

4
  • pq aparacer e dividido por cem? Commented 8/01/2018 às 15:55
  • se eu quiser alterar a cor novamente quando a pessoa subir a pagina e so eu por um else correto? Commented 8/01/2018 às 15:55
  • @LucasSimao Isso mesmo
    – Sam
    Commented 8/01/2018 às 16:00
  • tanks agora e guardar isso na minha cabeça Commented 8/01/2018 às 16:08

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 .