Click here to Skip to main content
13,147,376 members (25,738 online)
Rate this:
Please Sign up or sign in to vote.

I am making a website and in it I want to provide dynamic floating menu bar like Gmail(current one). I have searched over internet for it but there i found menu bar whose co-ordinates are fixed.

I mean if menu bar is on center of page and you scroll page a little then menu will also scroll but when menu bar comes to top of page then menu bar is fixed along with the page and will be shown throughout the whole page. For Example see Gmail menu bar having options like move, delete etc.

I need some help regarding this.

Posted 9-Aug-11 0:03am
Updated 9-Aug-11 6:16am
Slacker007 9-Aug-11 6:42am
Edited for readability.
guptha19sept 9-Aug-11 7:40am
you are talking about Archive,spam, delete,move to menu bar.
Sam_IDEA 9-Aug-11 9:30am
I'm talking about the same.
for more details about my question please scroll down the page.
Rate this: bad
Please Sign up or sign in to vote.

Solution 2

Matt Bradley 9-Aug-11 13:23pm
The example works (, and the snippets are taken from the example. Are you forgetting to include the jQuery source? What problems are you actually having?
Sam_IDEA 9-Aug-11 13:28pm
Same as you mention, I forgot to include jQuery source. But I included before your comment. :)

Thnxx a lot. It was great help. :)
Rate this: bad
Please Sign up or sign in to vote.

Solution 1

you can use position:fixed in your css code for the div which you want to fixed.
Sam_IDEA 9-Aug-11 9:29am
thnx 123arvind123 for your time.
As I mentioned I need to provide menu bar just like gmail is using(Archive,spam, delete,move to menu bar). If I uses position: fixed attribute, then menu bar will be fixed at that exact point only. I need when user scroll down the page, menu bar should scroll down until top of page is achieved and after that it should fix on top. I need some jquery snippets for this purpose.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy |
Web02 | 2.8.170915.1 | Last Updated 9 Aug 2011
Copyright © CodeProject, 1999-2017
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100