Sticky Social Icons in Sidebar using jQuery
by Vincy. Last modified on July 5th, 2023.
Sharing our webpage to social media is used to gain enormous reach for our webpage. So adding social icons to the webpage is very important to let the readers share your article. Readers want to share the website at any moment while reading your page.
So, it would be better to give high visibility for the social share icons of your page.
In this tutorial, we create sticky social share icons in the sidebar to be visible at any moment while scrolling. We use jQuery to get the CSS properties of the social share icon element and manipulate its position on the page scroll.
The code will compare the window’s position and the social icon element on the page scroll. Based on the comparison, it will change the social icons’ position to make it sticky. In a previous tutorial, we have seen how to create a floating contact form on page scroll using jQuery.
The following screenshot shows the web page output with the sticky social share icons in the sidebar.
HTML for Sticky Social Icons in Sidebar
The following code shows the HTML for the webpage with the sticky social icons in the sidebar. The social icons in the left sidebar are displayed after the list of menu items.
<div>
<div class="left-side-bar">
<ul>
<li>Integer Vitae</li>
<li>Vivamus Lacinia</li>
<li>Donec Rutrum</li>
<li>Sed Lacinia</li>
<li>Morbi ut Turpis</li>
<li>Rhoncus Nunc</li>
<li>Sed id Turpis</li>
<li>Vestibulum Commodo</li>
<li>Pellentesque Nec</li>
<li>Fusce Amet</li>
<li>Donec Sem</li>
<li>Praesent Iaculis</li>
<li>Tellus Tincidunt</li>
<li>Nunc Mollis</li>
<li>Quisque Urna</li>
</ul>
<div class="social-icon">
<img src="icon/facebook-social.png"
title="Share on Facebook" /> <img
src="icon/twitter-social.png" title="Share on Twitter" />
<img src="icon/linkedin-social.png"
title="Share on Linkedin" /> <img
src="icon/email-social.png" title="Share on Email" />
</div>
</div>
<div class="main-content">
<p>Quisque vitae erat et turpis sollicitudin sodales. Morbi
auctor placerat urna at sodales. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Nunc faucibus arcu sit amet nibh convallis
blandit. Nullam et sapien ac eros aliquam eleifend a sed
odio. Proin in ex imperdiet augue suscipit maximus.
Pellentesque malesuada, diam a mollis varius, felis sapien
pharetra felis, a suscipit leo massa sit amet magna. Morbi
maximus lacus a ex varius semper. Aliquam erat volutpat. Sed
luctus turpis sollicitudin facilisis cursus. Vestibulum
sodales ligula eu congue placerat. Curabitur est orci,
suscipit vel blandit sed, commodo at sem. Duis id facilisis
augue, vel ornare est. Aenean sollicitudin, odio in ultrices
faucibus, neque quam facilisis nunc, eu bibendum eros quam
eu dolor.</p>
</div>
</div>
And the styles are
<style>
body {
font-family: Arial;
}
.left-side-bar {
width: 250px;
float: left;
}
.main-content {
float: left;
width: 80%;
height:100px;
font-size: 1.2em;
line-height: 70px;
color: #919c9e;
}
.left-side-bar ul li {
padding: 15PX;
background: #bdcacc;
margin: 0px;
COLOR: #5c6567;
border-bottom: #c9d6d8 1px solid;
}
.left-side-bar ul {
list-style: none;
margin: 0px 20px 0px 0px;
padding: 0PX;
}
.social-icon {
padding: 20px;
}
.social-icon img {
padding: 0px 5px;
}
</style>
jQuery on Scroll Sticky Social Icons
The following jQuery code makes the social share icons in the sidebar sticky. The code gets the window scroll top and the Social icon’s top position and compares them to the page scroll event.
When the top of the scrolling window exceeds that of the social icons, the code manipulates the element’s top position to make it sticky.
<script>
$(document).ready(function(){
$( window ).scroll(function() {
$( ".social-icon" ).css("position", "relative");
$( ".social-icon" ).css("top", 0);
if($( window ).scrollTop() > $( ".social-icon" ).position().top) {
$( ".social-icon" ).css("position", "absolute");
$( ".social-icon" ).css("top", $( window ).scrollTop());
}
});
});
</script>
Written by Vincy, a web developer with 15+ years of experience and a Masters degree in Computer Science. She specializes in building modern, lightweight websites using PHP, JavaScript, React, and related technologies. Phppot helps you in mastering web development through over a decade of publishing quality tutorials.
Hi, I'm Vincy. I help build websites, grow businesses, big and small. If that is what you want, contact me.
I'm currently available for freelance work.