1

Vejo muitos temas de Wordpress usar o recurso de mostrar os elementos conforme se faz o scroll no site, um exemplo é esse: https://belle-demo.myshopify.com

Como é feito isso? Só com CSS é possível? Sem ter que usar jquery?

1
  • Não é possível somente com CSS, é necessário usar JavaScript 28/03/2018 às 16:04

1 Resposta 1

2

Isso não pode ser feito simplesmente com CSS, é preciso usar Javascript, já user jQuery é uma opção para facilitar as coisas.

Você pode usar o evento scroll e de acordo com o algum critério como a posição Y ou se um elemento está visível, esconder ou exibir outro...

Veja um exemplo:

$(document).scroll(function () {
    var y = $(this).scrollTop();
    
    if (y > 300 && y < 500) 
        $('#d1').fadeIn();
    else
    	$('#d1').fadeOut();
    
    if (y > 600 && y < 800) 
        $('#d2').fadeIn();
    else
    	$('#d2').fadeOut();
    
    if (y > 900 && y < 1100) 
         $('#d3').fadeIn();
    else
    	 $('#d3').fadeOut();

});
body {
    height:2000px;
}
div {
    display: none;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 80px;
    border-top: 1px solid #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<p>Rolar a tela...</p>

<div id='d1' style="background-color: red"></div>
<div id='d2' style="background-color: yellow"></div>
<div id='d3' style="background-color: green"></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 .