Ravindra24.com

Menu

How to make Sticky elements using HTML and CSS

by

Learn how to make sticky elements using HTML and CSS

Some times you might need to make a element sticky such as social media icons, contact numbers, email address or sticky header that usually comes when the user scroll the page toward down. Making sticky element can be done by using CSS properties. There is a property called position  and it’s value should be set to fixed. You need to specify the direction as well for the element weather it may be top, bottom, right or left.

CSS Code

.sticky
{
position:fixed;
top:350px;
right:0px;
background-color:white;
padding:15px;
}

HTML Code

<span class="sticky">
		<a href="https://ravindra24.com/whatsapp-sending-form-fields-to-whatsapp/" class="fb" target="_blank"><i class="fa fa-facebook-square" aria-hidden="true" style="font-size:30px;color:#fe5a00;"></i></a><br/><br/>
            <a href="https://ravindra24.com/whatsapp-sending-form-fields-to-whatsapp/" class="insta" target="_blank"><i class="fa fa-instagram" aria-hidden="true" style="font-size:30px;color:#fe5a00;"></i></a><br/><br/>
            <a href="#" class="telegram"><i class="fa fa-telegram" aria-hidden="true" target="_blank" style="font-size:30px;color:#fe5a00;"></i></a><br/>
		</span>

Leave a Comment