How to make Sticky Heading, Paragraph or Div in WordPress

This tutorial will show you how you can make an html (div, paragraph etc.) element sticky in WordPress environment.

You can do and add many things in WordPress Post with minimal knowledge of CSS or by just following the copy-pasting what WordPress post Editor (Classic or Block) won’t let you do.

The term Sticky is related to Scrolling. When anybody scroll a page (suppose vertically), elements on this page are also scrolled as usual. But when you make an element sticky, this won’t be scrolled, but would stay fixed in a position you defined earlier with CSS. This is sticky element. This tricks can be applied to make all div, p, h, img and other html elements sticky.

The CSS property you need to use for this being functioned is position. Use position: sticky and do define where you like the element to stick to.

What is Sticky element?

You can do almost the same thing with position: fixed. The only difference between two is that in position:fixed, the element doesn’t move but stay fixed over scrolling in defined position relative to the view-port. But sticky element move for a while until it reaches the defined position.

However, to create a sticky position of an html element, do the followings-

• In WordPress, take a Custom HTML block in Block Editor anywhere in the post or click Text mode in Classic Editor.
• Take an html element like div, p, h2.
• Style the element with position:sticky
• Fix the sticky position with top:0 or bottom:0. You can also set any other value if you will. That’s all.

Now let’s put the plan in action. We”ll certainly proceed step by step.

Style to create a sticky image

First take a container div with height:300px and width:50% as shown below:

CODE

<div style="border:4px ridge black;height:300px;width:50%;"> 

</div>

OUTPUT

Take a number of p and a h2 element inside div with adequate text.

CODE

<div style="border:4px ridge black;height:300px;width:50%;padding: 20px;"> 
<p> Some text here. Some text here. Some text here.   </p>
<p> Some text here. Some text here. Some text here.   </p>
<p> Some text here. Some text here. Some text here. </p>
<h2> This is sticky Heading </h2>
<p> Some text here. Some text here. Some text here. </p>
</div>

Now style the h2 with background, color, font-size, text-align, position and top property as shown below:

CODE

<div style="border:4px ridge black;height:300px;width:50%;padding: 20px;"> 
<p> Some text here. Some text here. Some text here.   </p>
<p> Some text here. Some text here. Some text here.   </p>
<p> Some text here. Some text here. Some text here. </p>
<h2 style="text-align:center; 
font-size:30px;
background:navy;
color:gold;
position:sticky;
top:0;"> This is sticky Heading </h2>
<p> Some text here. Some text here. Some text here. </p>
</div>

Now it is your time to see the result:

OUTPUT

Now scroll Top to Bottom and Bottom to Top and enjoy!!

Comment, please!