How to make image sticky in WordPress
In the previous tutorial, I showed how to make any html element sticky. If you followed that, you could easily make an image sticky to a defined position.
For the beginners, who are not skilled enough to apply their knowledge of CSS to materialize a project, we’re also going to show the tricks how to make an image sticky in WordPress as well as any other platforms.
What is sticky image
Suppose you inserted an image in a page. When anybody scrolls the page, the image also gets scrolled and not stay motionless. But, in case of sticky image, when anybody scrolls the page, the image is scrolled for a while and stay fixed in the position you defined earlier. In easy word, sticky image stay motionless over scrolling.
Look at the two images below, scroll up and down and surprisingly see the difference:
Morbi ut enim eu nulla mattis pharetra. Fusce at fermentum purus. Nulla eget facilisis mauris, vel pretium justo. Etiam quis lectus quis augue porttitor fermentum vitae in justo. Fusce ac magna eleifend, ornare nibh non, laoreet magna.
Morbi ut enim eu nulla mattis pharetra. Fusce at fermentum purus. Nulla eget facilisis mauris, vel pretium justo. Etiam quis lectus quis augue porttitor fermentum vitae in justo. Fusce ac magna eleifend, ornare nibh non, laoreet magna. Aliquam purus orci, scelerisque at dignissim interdum, iaculis sed mauris. Duis turpis tellus, fringilla vitae pulvinar id, mattis non diam. Mauris a molestie ante, et iaculis risus.
Morbi ut enim eu nulla mattis pharetra. Fusce at fermentum purus. Nulla eget facilisis mauris, vel pretium justo. Etiam quis lectus quis augue porttitor fermentum vitae in justo. Fusce ac magna eleifend, ornare nibh non, laoreet magna. Aliquam purus orci, scelerisque at dignissim interdum, iaculis sed mauris. Duis turpis tellus, fringilla vitae pulvinar id, mattis non diam. Mauris a molestie ante, et iaculis risus.
Morbi ut enim eu nulla mattis pharetra. Fusce at fermentum purus. Nulla eget facilisis mauris, vel pretium justo. Etiam quis lectus quis augue porttitor fermentum vitae in justo. Fusce ac magna eleifend, ornare nibh non, laoreet magna.
Morbi ut enim eu nulla mattis pharetra. Fusce at fermentum purus. Nulla eget facilisis mauris, vel pretium justo. Etiam quis lectus quis augue porttitor fermentum vitae in justo. Fusce ac magna eleifend, ornare nibh non, laoreet magna. Aliquam purus orci, scelerisque at dignissim interdum, iaculis sed mauris. Duis turpis tellus, fringilla vitae pulvinar id, mattis non diam. Mauris a molestie ante, et iaculis risus.
Morbi ut enim eu nulla mattis pharetra. Fusce at fermentum purus. Nulla eget facilisis mauris, vel pretium justo. Etiam quis lectus quis augue porttitor fermentum vitae in justo. Fusce ac magna eleifend, ornare nibh non, laoreet magna. Aliquam purus orci, scelerisque at dignissim interdum, iaculis sed mauris. Duis turpis tellus, fringilla vitae pulvinar id, mattis non diam. Mauris a molestie ante, et iaculis risus.
This stickiness of image may be essential in you site, especially, when you feel that the image should be visible all the time during scrolling by a site visitor.
However, we won’t go deep into theoretical approach. Let’s go into action:
CSS trick to make an image sticky
If you want to make an image sticky in WordPress, take a Custom HTML block in Block Editor. Alternatively work in Text mode in Classic Editor. And start writing code.
First take a container div. Style it with border, height, width, padding and overflow-y (for vertical scrolling) properties with necessary values as shown below:
<div style="
border:4px ridge darkgreen;
height:300px;
width:50%;
padding:20px;
overflow-y:scroll;">
</div>
Now take three p elements with adequate text in need of scrolling.
<div style="border:4px ridge darkgreen;height:300px;width:50%;padding:20px;overflow-y:scroll;"> <p> Morbi ut enim eu nulla mattis pharetra. Fusce at fermentum purus. Nulla eget facilisis mauris. </p> <p> Morbi ut enim eu nulla mattis pharetra. Fusce at fermentum purus. </p> <p>Morbi ut enim eu nulla mattis pharetra. Fusce at fermentum purus. Nulla eget facilisis mauris, vel pretium justo. </p> </div>Now after the first
p, take the img element with src, width and height. To make the image STICKY, add position:sticky and top:0 property with it.
<div style="border:4px ridge darkgreen;height:300px;width:50%;padding:20px;overflow-y:scroll;"> <p> Morbi ut enim eu nulla mattis pharetra. Fusce at fermentum purus. Nulla eget facilisis mauris. </p> <img class ="https://www.netplanter.com/wp-content/uploads/2020/02/LOTUS-2.jpg" style="width:150px; height:150px; position:sticky; top:0;"> <p> Morbi ut enim eu nulla mattis pharetra. Fusce at fermentum purus. </p> <p>Morbi ut enim eu nulla mattis pharetra. Fusce at fermentum purus. Nulla eget facilisis mauris, vel pretium justo. </p> </div>Our codes are all set. Now see the result:
Morbi ut enim eu nulla mattis pharetra. Fusce at fermentum purus. Nulla eget facilisis mauris, vel pretium justo. Etiam quis lectus quis augue porttitor fermentum vitae in justo.
Morbi ut enim eu nulla mattis pharetra. Fusce at fermentum purus. Nulla eget facilisis mauris, vel pretium justo. Etiam quis lectus quis augue porttitor fermentum vitae in justo. Fusce ac magna eleifend, ornare nibh non, laoreet magna. Aliquam purus orci, scelerisque at dignissim interdum, iaculis sed mauris. Duis turpis tellus, fringilla vitae pulvinar id, mattis non diam. Mauris a molestie ante, et iaculis risus.
Morbi ut enim eu nulla mattis pharetra. Fusce at fermentum purus. Nulla eget facilisis mauris, vel pretium justo. Etiam quis lectus quis augue porttitor fermentum vitae in justo. Fusce ac magna eleifend, ornare nibh non, laoreet magna. Aliquam purus orci, scelerisque at dignissim interdum, iaculis sed mauris. Duis turpis tellus, fringilla vitae pulvinar id, mattis non diam. Mauris a molestie ante, et iaculis risus.
