Show div when scrolling the page?

Question

Show div when scrolling the page?

Navigation

#1 by (1 votes)

1

I see many Wordpress themes using the feature to show the elements as it scrolls in the site, an example is this: link

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

css css3

asked by anonymous 28.03.2018 / 17:47

1 answer

View does not show string value in primary key field Ajax with html checkbox

score 1 · Answer 1

This can not be done simply with CSS , you must use Javascript , since user jQuery is an option to make things easier.

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

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