Iphone icon set: Get more than 15000 icons FREE!

You accept to be included in our newsletter (We only send amazing freebies like this, no ads or crap, promise! )

Tweet about us and say thanks in comments ;)

Amazing freebies every week in your e-mail, don't miss the next ones with our newsletter, Sign up now.

Tweet about us and say thanks in comments ;)

Floating social toolbar with jQuery and CSS

Comments and suggestions in here

Hello friends, today we’re going to show you how to make a fancy floating bar using jQuery and JavaScript, as the one you see when scrolling down on this page. From creating the PHP file to customizing the CSS, we will guide you across the several steps before you can complete this fancy floating bar ready to be implemented on your website and where you can place several elements, including social icons, information and more. Some other good examples of floating bars can be found at Meebo and Wibiya. Remember that among the main uses you can give to this great floating bar we can list:

  • Social information
  • Advertising
  • Highlight important information (promos, etc.)
  • Contact information
  • Polls / feedback

View Demo 1View Demo 2See it in action

How does it work?

What we’re making on this tutorial is a nice floating bar with tooltip. The floating bar displays from the top of the page in a subtle way that starts increasing the bar’s opacity little by little, besides that you will find on the 2nd demo that when you roll over the bar, a fancy tooltip will display. The programming part is very simple, and to make it even simpler, we will explain you every step that we take during the process.


Make the HTML

The first thing that we need to do is the HTML. For start we must create the demo page and then save it as demo.php so we can continue with the implementation of the jQuery library.

  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>Floating bar by tutorialshock</title>  <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.js"></script>  </head>  <body>  </body>  </html>  

Configure the CSS


  /*This is the main container, it's 100 % width so it can always expand horizontally to the totality of the screen.*/  div.scr_esp_down{  width:100%;  height:51px;  /* This is the 1 pixel background image that expands horizontally */  background: url(images/toolbar_make.jpg) repeat-x ;  position:fixed;  top:0;  left:0;  /* We place it in front of the rest*/  z-index:9999;  /* We start the opacity from 10%*/  opacity:0.10;  filter:alpha(opacity=10);  /* We initialize the container as hidden, then we use this operator because we need to reserve the area that the floating bar is going to occupy once it’s shown*/  visibility:hidden;  }    /* This div contains the image with the floating bar’s information such as the icons, main message and more. We initialize it on the horizontal center of the page*/    div.scr_esp_down div{  width:100%;  height:51px;  background:url(images/IS_toolbar_img.jpg) no-repeat top center ;  }    /*This class applies for the tooltip that is going to show on the 2nd demo’s roll over, on this case we use display none due to the fact that we no longer need to save space for this    image*/  img.img_animate{  display:none;  }  

Now the remaining HTML

  <div id="toolbar" align="center" class="scr_esp_down">  <div>  </div>  <img src="images/tooltip_2.jpg" border="0" class="img_animate" />  </div>  /* This div sets a fixed height to the page so the scroll gets visible */  <div style="height:3000px;">  </div>  

Finally the JS part, which does the magic :)

  /* This function avoids having conflicts with other jQuery scripts, we suggest you to always use it.*/    var $jx= jQuery.noConflict();    /* On this validation we identify the browser to assign it the superior value of the vertical scroll, because you must remember that every browser plays by its own rules*/  


    $jx(window).scroll(function () {      if (whichBrs()=='chrome')      {  /* Identifies the superior position of the scroll in Chrome*/          $scroll_final=document.body.scrollTop;      }      if (whichBrs()=='Internet Explorer' || whichBrs()=='Firefox' )      {  /* Identifies the superior position of the scroll in Firefox and Internet Explorer*/          $scroll_final=document.documentElement.scrollTop;      }    /* If you need to add additional browsers then you have to research which function establishes the top position on each one of them*/    /* On this part we identify the main container*/      var toolbarid=document.getElementById('toolbar');   /* If the superior value of the scroll goes below 300, it means that the toolbar must not be shown and it will only be displayed once this value has been passed */      if ($scroll_final < 300)      {          toolbarid.style.visibility='hidden';      }     /* Here’s where the fade in animation begins*/    /* On this part we check the top value of the scroll and then we make 3 different opacity ranges to recreate the fade in effect. if you wish a softer effect you can simply add some    extra ranges*/  


  if ($scroll_final > 300 && $scroll_final  <600 )      {          toolbarid.style.opacity='0.20';          toolbarid.style.filter='alpha(opacity=20)';          toolbarid.style.visibility='visible';      }      if ($scroll_final >600 && $scroll_final <1000 )      {          toolbarid.style.opacity='0.40';          toolbarid.style.filter='alpha(opacity=40)';          toolbarid.style.visibility='visible';      }        if ($scroll_final >=1000)      {          toolbarid.style.opacity='1.00';          toolbarid.style.filter='alpha(opacity=100)';          toolbarid.style.visibility='visible';      }  }  );    var $bt= jQuery.noConflict();  var time=0;    /*Coming next is the code that handles the tooltip*/    $bt(document).ready(function() {    /* We utilize the slideToggle function from jQuery to animate the tooltip, you can try another types of speeds and animation by visiting  http://api.jquery.com/category/effects/ */        $bt("#toolbar").stop(true,true).mouseover(function () {        /* This part displays the tooltip*/        if (time==0)          {              $bt(".img_animate").slideToggle("slow");              time=1;          }      });        /* And this part hides the tooltip*/        $bt(".img_animate").click(function () {          if (time==1)          {              $bt(".img_animate").slideToggle("slow");              time=0;          }      });  });    /* Here’s where we make the tooltip to turn invisible once we click outside the tooltip’s image*/    $(document).bind('click', function(e){      var $clicked = $(e.target);      if (!($clicked.is('.img_animate') || $clicked.parents().is('.img_animate'))) {          $bt(".img_animate").stop(true, true);          time=0;          $bt(".img_animate").hide();      }  });    /* Identifies which browser is being utilized */    function whichBrs() {      var agt=navigator.userAgent.toLowerCase();      if (agt.indexOf("opera") != -1) return 'Opera';      if (agt.indexOf("staroffice") != -1) return 'Star Office';      if (agt.indexOf("webtv") != -1) return 'WebTV';      if (agt.indexOf("beonex") != -1) return 'Beonex';      if (agt.indexOf("chimera") != -1) return 'Chimera';      if (agt.indexOf("netpositive") != -1) return 'NetPositive';      if (agt.indexOf("phoenix") != -1) return 'Phoenix';      if (agt.indexOf("firefox") != -1) return 'Firefox';      if (agt.indexOf("chrome") != -1) return 'chrome';      if (agt.indexOf("safari") != -1) return 'Safari';      if (agt.indexOf("skipstone") != -1) return 'SkipStone';      if (agt.indexOf("msie") != -1) return 'Internet Explorer';      if (agt.indexOf("netscape") != -1) return 'Netscape';      if (agt.indexOf("mozilla/5.0") != -1) return 'Mozilla';      if (agt.indexOf('/') != -1) {          if (agt.substr(0,agt.indexOf('/')) != 'mozilla') {          return navigator.userAgent.substr(0,agt.indexOf('/'));}      else return 'Netscape';} else if (agt.indexOf(' ') != -1)      return navigator.userAgent.substr(0,agt.indexOf(' '));      else return navigator.userAgent;  }  

And there you have it, a fancy floating bar made in a short time, let us know how it went to see if you have any doubts, the important thing is to remember that you can utilize this nice floating bar in several ways, including advertising, providing additional information or showing social icons and stuff; class dismissed, see you on our next tutorial.
View Demo 1
View Demo 2
See it in action
Download source

80 Responses to “Floating social toolbar with jQuery and CSS”

  1. The one that shows on the top is nice, but I want one like the social bar that shows to the left with the twitter and facebook buttons.

    I wonder how google would feel about the top bar hovering over their ads?

    • TS Editorial
      December 14th

      Hi Bob, the left bar has a different functionality to the top floating bar, however, it can be easily adapted to work laterally… we will publish later on an article showing you how to do it. Thanks for the idea and your comment, we’re glad you liked the tutorial :)…

    • Hi, i agree with bob, I would like to know how to create the social media vertical floating box on the left hand side. Do you have a tutorial for that? Thanks for your help.

    • Hi Aiden! Thank you very much for your input. We are working on it! Stay tuned for the upcoming posts. Cheers.

  2. It doesn’t seem to work for me… I can’t watch the demo’s or the site where it’s in action. This is strange, maybe because I’m using safari? However, it’s possible to run it in Safari…

    • TS Editorial
      December 14th

      Hi man, actually if you take a look at the validation within the code, you will see that you can easily validate the visualization for Safari ;)…

  3. Thanks for the quick reply! The more that I think about it, having that bar at the top is a brilliant idea for sharing information with your visitors (Just ask gawker media.) I will have to try it out tonight. With my website, I’m not sure if it would be better to have a banner at the top or bottom. However I definitely want the twitter/facebook buttons on the left.

    • TS Editorial
      December 14th

      No worries Bob, we always check our comments’ inbox to respond every doubt and comment that our visitors leave :). As for the floating bar, it’s just a matter of tastes and functionality, we decided to put it on top, while many others prefer to let it rest on the bottom; as for the social icons, probably the best option is definitely to put’em at one side of the website…

      P.S: The close button idea is great, we will definitely put it into consideration with our team…

  4. Idea #2, in your next tutorial, add a close button. That will make the bar work for ALL websites. If the individual user doesn’t want it since it’s blocking the content, they could easily just click on the X or CLOSE, and that would be it.

  5. This is a really good idea and tutorial. It is a very good way to remind site visitors of some important ways to stay connected, or to simply give out information that demands attention.

    This would suit well in some future applications we have (with credit of course).

    Thanks for the awesome tutorial!
    – 8th Studio

    • TS Editorial
      December 31st

      Thanks buddies, we developed this great floating bar so you guys can implement it on your own applications :)…

  6. very nice tut.

  7. Good tutorial, thanks for writing this!

    • TS Editorial
      March 17th

      You’re welcome ;), thanks for your comment…

  8. Wow this is really interesting im going to try this on my website Thanks :)

    • TS Editorial
      April 14th

      Hey that’s awesome Liam, please let us know once you have it :)…

  9. I really like this effect! Thanks for sharing.

  10. Didn’t really think much about this floating bar. It is nicely done. Very very nice.

    Thanks for the tutorial.

    • TS Editorial
      April 20th

      You’re welcome, thanks for your comment…

  11. The catchy blog with the interesting contents. You give the nice information that many people don’t know before. most of your contents are make me have more knowledge. it is very different. I was impressed with your blog. Never be bored to visit your website again. Have the nice day. Keep enjoyed your blogging.

    • TS Editorial
      June 15th

      Thanks man, we’re so glad of seeing how people is enjoying our site more and more everyday, we promise that more quality contents and articles are around the corner…

  12. nice one… but I thought it was on the left sidebar of this blog…
    <—- what about that on the left bar, what is it called?

    • TS Editorial
      July 11th

      You mean the social toolbar?, that’s Digg Digg…

  13. This seems to work cross-browser to get the scroll position: 
    $scroll_final = window.pageYOffset ? window.pageYOffset : document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;

    Worked in IE7, Chrome, Firefox, Safari on a quick test 

    • TS Editorial
      July 14th

      Ou yeah, that works great!, thanks for your contribution Brett, don’t forget to check the latest article at Webdesignshock to obtain a Google+ invitation…

  14. thanks for sharing

  15. Kasia
    August 4th

    Hi, I was searching for a floating toolbar with social buttons, and I found this very interesting, but … 
    How to add the left-side social toolbar to a website (this on the left)? It’s much more interesting for me, now ;) 
    Is there any article about it here?
    (very useful form to send comments & suggestions!)

    • Thanks Kasia, we’re glad you like the tutorial. Regarding your question, our left social bar works with a WP plugin named Digg Digg…

  16. Thanks a lot for the tutorial and scripts, it’s just beautiful!

  17. Nice Looking Floating…. really i like it.. thank you for share..

  18. Since I don’t see any questions about functionality, I assume I must be doing something wrong because this does not work for me.

    I keep getting a .js error of $ is not a function for this line: “$(document).bind(‘click’, function(e){”

    Any idea what I’m doing wrong?

  19. Thanks for this incredible tutorial. Soon i will apply on my website. thanks

  20. viagra
    February 13th

    excellent publish, very informative. I wonder why the opposite specialists of this sector don’t notice this. You should proceed your writing. I am confident, you’ve a huge readers’ base already!

  21. Just a couple of minutes were searching for a floating toolbar with social buttons and found your toolbar option very useful, I will try to apply it for my website if I have problems to implement it can I email you? thank you.

  22. Hello, 

    I am trying to make a current plugin that I’m using (Widgitized Stickybar) appear in this way.  I am using a widget bar at the top of my page, but right now, I only have the option of collapsing it or making it appear all the time.  I’d like it to appear once the user begins to scroll down the page.  Can you please email me or let me know if this is a job you could do, along with the rates you would charge to do it?  Thanks so much for your help!  

  23. The best

  24. Very useful  example. Thanks for tutorial.

  25. wow! what a good job here .your tutorial is very easily described but it is so easy floating bar displays.thank you for shearing you great and helpful post.

  26. [...] Create the amicable floating club with jQuery as well as JavaScript « Photoshop tutorials &amp… [...]

  27. [...] Create a social floating bar with jQuery and JavaScript … [...]

  28. [...] Create a social floating bar with jQuery and JavaScript … [...]

  29. [...] See original here: Create a social floating bar with jQuery and JavaScript … [...]

  30. [...] your website and where you can place several elements, including social icons, information and more.Source Link Related PostsTop Ten Best Online Time Tracking Software42 Cool and New Released Fonts For Your [...]

  31. [...] Create a social floating bar with jQuery and CSS « Photoshop … [...]

  32. Create a social floating bar with jQuery and CSS…

    From creating the PHP file to customizing the CSS, we will guide you across the several steps before you can complete this fancy floating bar ready to be implemented on your website and where you can place several elements, including social icons, info…

  33. [...] Create a amicable floating club with jQuery as well as CSS « Photoshop tutorials & illustr… [...]

  34. [...] Create the amicable floating club with jQuery as great as CSS « Photoshop tutorials & illu… [...]

  35. [...] Create a social floating bar with jQuery and CSS « Photoshop … [...]

  36. [...] div.scr_esp_down{ width:100%; tutorialshock.com [...]

  37. [...] Floating social bar with jQuery and CSS [...]

  38. [...] Floating social bar with jQuery and CSS [...]

  39. [...] Floating social bar with jQuery and CSS [...]

  40. [...] Floating social bar with jQuery and CSS [...]

  41. [...] Floating social bar with jQuery and CSS [...]

  42. [...] Floating social bar with jQuery and CSS [...]

  43. [...] 学习使用 jQuery 制作浮动的社交工具条 [...]

  44. [...] 学习使用 jQuery 制作浮动的社交工具条 [...]

  45. [...] 学习使用 jQuery 制作浮动的社交工具条 [...]

  46. [...] 学习使用 jQuery 制作浮动的社交工具条 [...]

  47. [...] 学习使用 jQuery 制作很酷的动态菜单学习使用 jQuery 制作动态的作品集画廊学习使用 jQuery 制作浮动的社交工具条通过 jQuery 掌握元素的拖放技术学习使用 jQuery [...]

  48. [...] colors, easing method and duration. Flashy Navigation with easing and hoverIntentView the DemoFloating Social Bar with jQuery and CSSFrom creating the PHP file to customizing the CSS, this tutorial will guide you through the steps to [...]

  49. [...] Floating Social Bar with jQuery and CSS [...]

  50. [...] Floating Social Bar with jQuery and CSS [...]

  51. [...] «Плавающая панель» для социальных [...]

  52. [...] Floating Social Bar with jQuery and CSS [...]

  53. [...] Floating Social Bar with jQuery and CSS [...]

  54. Dodaj na stronę www / bloga pływający banner społecznościowy http://t.co/GiTPQFxr via @webdesignshock

  55. How to make a floating social toolbar with jQuery and CSS > http://t.co/oK7yfCFC

Leave a Reply