65 thoughts on “Fixed that bar at the bottom like Facebook!”

1. I kinda like your example, but in IE7 I see a couple of extra scrollbars (both horizontal and vertical), how come?

2. Fixed!

   Bug Fix:
   1. Overlapping scrollbar (vertical and horizontal).
   2. Page wouldn’t scroll down when the mouse pointer is in a white/blank space.

   The sample page are optimized for 960×600 and higher resolutions. Tested on FF3, IE6, IE7, and IE8.

   Download: http://ryan.rawswift.com/sandbox/fixed-bottom-bar/fixed-bar-0.2.tgz

   Thanks!

3. Pingback: New MoMA.org at //nedward.org

4. So how do you get little windows to pop up in those corresponding menu positions when they are clicked similar to facebook?
   Is there an API that can be used to achieve this effect?
   Great script btw, i am thinking of incorporating it in http://www.theillbeat.com
   Thanks.

5. the bar is a div, which means with page refresh the state is lost.

6. Thanks my friend =) The sample very good

7. Pingback: jstcky: A stick or die JavaScript framework « Bicolano Express by Ryan Yonzon

8. Very nice little sample, however it seems to overlap the page scroll bars (when they are visible due to content length), the live version on this page itself (in firefox 3) as you reduce the width of the browser pushes the vertical scroll bar off the page completely and the horizontal scroll bar doesn’t appear.

9. Hi Very nice work , but have you an idea how to make this bar without reload like facebook when you click to a link the bar will not dispear
   thanks

10. Hello dear i was finding this stuff but it contains a prob here at my pc when i open your sample in Microsoft internet explorer the there is no right scroll bar to scroll the page mean the page appear as fix i can see the bar but cant navigate down please guide me how to fix this issue.
    Regards.
    Hussain

11. hey, thx, nice app
    but one question, where do i have to put this folder into?

    zer0

    PS: sry if you didnt understand me, i’m swiss… ;D

12. please wordpress plugin bottom bar

13. Been looking for this for a long time. Was about to buy a commercial one which I believe is not as flexible as this one.

    Thanks

14. Darn, it doesn’t work the way its expected to be on my wordpress blog.

15. Can youb have the submenus popup like in facebook? Thanks!

16. Thanks for the great share.. all people are looking….

17. Hi, I copied the html code from the page and pasted it in to MS Frontpage, and started deleting the writing on there and it worked. Lately I’ve tried again and the writing is there but the bar is not and it just shows the list of links. Is it possible for someone to send me the html just for the bar so I can copy and paste it or email me even. Thanks alot, Dan.

18. good …but it will not work in IE6

19. Hey, it’s exactly I was looking for… that fixed bar at bottom.

    Thanks!!

    Greetings

    Joel #

20. hi…
    i’ve downloaded the .tgz file but when i extracted it , it seems empty
    please can anyone reupload it.. i really need it as soon as possible.
    thanx

21. Hi
    I saw similar bar at bottom of a blog but in that bar. But there was an arrow button kind of facility on that bar at the right side of the bar, when you click on that arrow bar gets expanded or collapsed a little. When expanded mode it shows all the links or icons. When collapsed only arrow is shown and bar height gets halved (thinner bar).

    I don’t remember that site and searching hard to find it.

    If you have any idea how to create this hide and seek functionality also in the bottom bar please let me know.

    Best Regards
    divman

22. Darn, it doesn’t work the way its expected to be on my wordpress blog.

23. At first it didn’t work on my site. Then I changed the “position: absolute” to fixed and it worked beautifully.

    Thanks for the file!

    Nick

24. There is a problem with this in that if you resize your window so that you reduce the width to less than the width of the bar, your vertical scrollbar disappears.
    This happens with both Firefox v3.5 and IE8. The Facebook bar doesn’t cause this. Nice work however, obviously just needs a small tweak.

25. how to put it in a wordpress theme?

    can u tell sir?

26. Thanks. a simple piece of prototype.
    For ambitious developers,”Try to do the rest of the work yourself ”

27. I finally got this running. couple changes
    For nav_menu_wrapper,
    1.Include position:fixed so that the position always floats.
    2. add left:100px or whatever that suits you (for IE7)

    Also comment the body,html if you observe scroll bar missing.Good luck!

28. Thank you so much for this, it works perfectly, i just needed to turn
    position to fixed in #nav_menu_wrapper
    for people who see that the bar is not in the bottom, just put position:fixed instead of position:absolute; in the first #nav_menu_wrapper.

    But it works perfectly thank you.

29. Very cool, thanks for sharing. I’ve been wanting to do a similar, basic variation myself for my portfolio.

    I did notice that the scroll wheel is disabled on your site and in your example. I’m just going the through the code now, but didn’t notice it addressed. Does the scroll wheel need to be disabled for this code to work?

    Thx,
    Dave

30. Excuse me, I meant the scroll wheel “button” is disabled. Not a huge deal but I do use the auto-scroll function occasionally. I guess it’s a PC thing.

31. Hello I put your bottom bar in my site http://www.cartemagictorino.com. Initially it seems to work fine but after few test I noticed that the bar overlap the horizontal scroll bar. So unfortunately is unusable. Is it possibile to compute dinamically the position in order to place the bottom bar on the top of the horizzontal scroll bar ?
    Thank you!

32. just use

    position:fixed;
    bottom:0px;

33. sweet as, thanks dude!

34. Hi, is there a way i can modify this to use on blogger?
    Thanks!

35. Thanks for this contribution!

36. works great, thanks!

37. Hi,

    Thanks Ryan for the sample. I’m still pulling my hair out trying to figure out how make it with drop down menu (like the Application in Facebook menu). The drop down CSS menu always drop-down, I can’t get it to drop-upwards. Is there anyway you can show us some light?

    Please, any suggestion.

38. Thanks for this contribution

39. hi,
    it’s good work, but my probleme is the scroolbar not appear in all the navigateur.!!
    wath’s i can do?
    tnx

40. Hello. Thank you for the code! I’ve been looking for this source and I want to use it on my website. Can I use this for free?

41. Padi maurag ka talaga! Dakulaon na tabang ining tutorial mo salamat! Sikaton na baga ining post mo

42. Thanks padi! Pero mas maurag ka man giraray, ta su code mo na-isabay sa Flex 3 Cookbook. Yan ang maurag na achievement! Props to you bro! Keep up the good work.

43. I’m new to HTML and CSS, I can’t find where to edit the links, for example, if I want to add a google link, how would I do it?

44. Just what i want. thanks alot

45. can you please make it into a plugin which can be used in wordpress or a step by Step guide explaining how we can get it to work in WordPress

46. This has some usability issues. Page Up / Page Down buttons as well as the spacebar buttons doesnt work..

47. How does it reacte to youtube videos ? does the bar stay on top of the videos ?

48. Thanks For fixed

49. Only one thing that prevents me from using this solution;

    When loading a page with this bar, there’s some accessibility issues. You cant scroll down using spacebar, page down/up or by using the mouse wheel. This is because these keys are relative to the viewport that normally has the scroll bar.

    However, once you click inside the div that actually has the scroll bar, it works. Any way to add focus to the scrolling div trough jQuery?

50. Thanks for the great fixed footer. it was just what i was looking for. I like it, but the only thing is when I put it on my page, anything that had a css property of absolute becomes fixed on the page. This ruins my template. When I remove the footer, everything becomes absolute again.