jQuery Sticky Social Sidebar

Hi, in most of the websites we have seen the social icon bar is fixed in some corner of website this will attract and divert the visitors vision to attempt to like and share to others about our website.
Today we are going to see how will do this using jQuery and css.

HTML

take one div give it name share, inside this take list of items with social icons and put it in sharebar div, and to navigate the bar from right side to left side take two more dives and give it name #left and #right

<div id="share">
<div id="left">></div>

<div id="right"><</div>

<div id="sharebar">

<ul id="icons">
<li><img src="you.jpg" width="30" height="30"></li>

<li><img src="p.jpg" width="30" height="30"></li>
<li><img src="in.jpg" width="30" height="30"></li>
<li><img src="ot.jpg" width="30" height="30"></li>
<li><a href="https://twitter.com/lessoncup" target="_blank" title="Lessoncup Follow me @ Twitter">
<img src="tw.jpg" width="30" height="30" border="0"></a></li>
<li><a href="http://www.facebook.com/lessoncup" target="_blank" title="Lessoncup Follow me @ Google+">
<img src="g+.jpg" width="30" height="30" border="0"></a></li>
<li><a href="https://plus.google.com/+lessoncup" target="_blank" title="Lessoncup Follow me @ Facebook">
<img src="fb.jpg" width="30" height="30" border="0"></a></li>
</ul>

</div>
</div>

CSS

put the position: fixed and set the margins from top:0; and right:-300px to #share div, and set the properties to #left and #right dives and put #left div to display:none;

<style>

body{ font-family:Verdana, Geneva, sans-serif; color:#000; font-size:11px; background-color:#000;}

#lessoncup{width:400px; height:auto; border:solid #CCC 0; padding:5px; margin:0 auto; margin-top:200px; font-size:24px; color:#0CF; vertical-align:text-top;}

span{ font-size:10px; color:#FC0; margin:0; padding:0;}

p{ margin:0; padding:0; line-height:17px;}

#share{ position:fixed; right:-295px; width:315px; height:40px; background-color:#CF6; top:0; overflow:hidden; cursor:pointer;}

#sharebar{width:295px; height:40px; background-color:#F90; float:right;}

#icons{ list-style:none; margin:0; padding:0;}

#icons li{ padding:5px; margin-right:2px; float:right;}

#right{ font-weight:bold; font-size:12px; margin-top:12px; margin-left:4px; width:5px; height:40px; float:left; cursor:pointer;}

#left{ font-weight:bold; font-size:12px; margin-top:12px; margin-left:4px; width:5px;height:40px; float:left;display:none;}

</style>

JAVASCRIPT

write the click function to right div and animate the share div form right side to 0 position and mention the speed also using animate() method, it will animate the div from -300px to 0 position because we have already assigned the right position to share div, once it reach to 0 position just hide the right arrow icon and show the left arrow icon,

And write second click function to left div to send the #share div to first position and hide the #left div and show the #right div 

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script>

$(document).ready(function(){
 
 $('#right').click(function(){
  
  $('#share').animate({right: "0"}, 500);
  $('#right').hide();
  $('#left').show();
  
 });
 
 $('#left').click(function(){
  
  $('#share').animate({right: "-295px"}, 500);
  $('#left').hide();
  $('#right').show();
  
 });
 
});
 
 
</script>

Live Demo   Download Script