Sticky Social Icons in Sidebar using jQuery

Sharing webpage to the 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 they are 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 manipulating its position on page scroll. On the page scroll, the code will compare the position of the window and the social icon element. 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 floating contact form on page scroll using jQuery.

jQuery on Scroll Sticky Social Icons

The following jQuery code is used to make the social share icons in the sidebar to be sticky. The code gets the window scroll top and the Social icons top position and compares them on page scroll event. When the top of the scrolling window exceeds than that of the social icons, the code manipulates the social icons element top position to make it sticky.