How to Create a Fixed or Sticky Social Media Icon Bar

Having quick access to your social media profiles on your website can make it easier for visitors to connect with you.

In this tutorial, we’ll show you how to create a fixed or sticky social media icon bar that will remain visible on the screen as the user scrolls down the page.

HTML Code

The first step in creating a fixed or sticky social media icon bar is to write the HTML code.

The code should contain the icons for the social media platforms that you want to include in your bar.

Here is an example of the HTML code for a fixed social media icon bar:

<div class="social-media-icons">
  <a href="#"><i class="fa fa-facebook"></i></a>
  <a href="#"><i class="fa fa-twitter"></i></a>
  <a href="#"><i class="fa fa-instagram"></i></a>
  <a href="#"><i class="fa fa-linkedin"></i></a>
</div>

CSS Code

The next step is to add the CSS code that will style the social media icon bar.

The CSS code will specify the size, color, and position of the icons. Here is an example of the CSS code for a fixed social media icon bar:

.social-media-icons {
position: fixed;
bottom: 20px;
right: 20px;
display: flex;
justify-content: space-between;
width: 50px;
height: 50px;
background-color: #fff;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.social-media-icons a {
display: flex;
align-items: center;
justify-content: center;
width: 50%;
height: 50%;
color: #333;
transition: 0.3s;
}

.social-media-icons a:hover {
background-color: #333;
color: #fff;
}

.social-media-icons i {
font-size: 20px;
}

Javascript Code (Optional)

To make the social media icon bar sticky, you can add some Javascript code to the HTML file.

The Javascript code will make the icon bar stick to the top of the screen when the user scrolls down the page.

Here is an example of the Javascript code for a sticky social media icon bar:

$(window).scroll(function() {
if ($(this).scrollTop() > 50) {
$('.social-media-icons').addClass('sticky');
} else {
$('.social-media-icons').removeClass('sticky');
}
});

And don’t forget to include the jQuery library in your HTML file

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Conclusion

In conclusion, creating a fixed or sticky social media icon bar for your website is an easy and effective way to give visitors quick access to your social media profiles.