Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
Hi,
 
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.
 
Thanks.
Sammy
Posted 9-Aug-11 1:03am
Edited 9-Aug-11 7:16am
v3
Comments
Slacker007 at 9-Aug-11 6:42am
   
Edited for readability.
guptha19sept at 9-Aug-11 7:40am
   
you are talking about Archive,spam, delete,move to menu bar.
Sam_IDEA at 9-Aug-11 9:30am
   
yeah.
I'm talking about the same.
for more details about my question please scroll down the page.
thnx
Sammy
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

  Permalink  
Comments
Matt Bradley at 9-Aug-11 13:23pm
   
The example works (http://www.dittocode.com/sandbox/floating-menu-bar1.html), and the snippets are taken from the example. Are you forgetting to include the jQuery source? What problems are you actually having?
Sam_IDEA at 9-Aug-11 13:28pm
   
Sorry.
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
good
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.
  Permalink  
Comments
Sam_IDEA at 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.
Thnx
Sammy

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

  Print Answers RSS
0 OriginalGriff 515
1 Maciej Los 290
2 Richard MacCutchan 265
3 BillWoodruff 235
4 Suraj Sahoo | Coding Passion 175
0 OriginalGriff 8,804
1 Sergey Alexandrovich Kryukov 7,457
2 DamithSL 5,689
3 Maciej Los 5,279
4 Manas Bhardwaj 4,986


Advertise | Privacy | Mobile
Web01 | 2.8.1411028.1 | Last Updated 9 Aug 2011
Copyright © CodeProject, 1999-2014
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