Show div to scrolar the page?

Asked

Viewed 63 times

1

I see many Wordpress themes use the feature to show the elements as you scroll on the site, an example is this: https://belle-demo.myshopify.com

How is this done? Only with CSS is it possible? Without having to use jquery?

css css3 animation

  • Not only possible with CSS, you need to use Javascript

1 answer

1

This cannot be done simply with CSS, need to use Javascript, already user jQuery is an option to make things easier.

You can use the event scroll and according to some criterion such as the position Y or if one element is visible, hide or display another...

Take an example:

$(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>

Browser other questions tagged css css3 animation

You are not signed in. Login or sign up in order to post.