Friday, April 29, 2011

How to create a floating menu

Need some advice on creating a floating menu that behaves very similar to what is used on the apple website shopping cart. I've seen some scripts that do something like this (and we've tried one) but they tend to "lag" behind the movement while apple's version gives the appearance of being stationary. A jQuery solution would be preferable.

From stackoverflow
  • Well, looks like they are switching from relative positioning to fixed. Works better than what most people do, which is simply scroll it down more as the window is scrolled down more.

    You can detect how scrolled down the window is by following what is done in the following link.

    Stevo : did you forgot to add the link?
    altCognito : Ah, thank you. It's in there now.
    Akeem : This is what I was guessing by looking at how apple's version blips into place when you get to the top. Thanks for the link and I'll give it a shot
  • Once the div's y-position is equivalent to the top of the current window view, make it fixed position. You will have to use logic to make sure it moves back to non-fixed after they scroll back up, but it should be trivial.

  • Here is a plugin called scroll-follow that will help. Essentially you define a DIV with ul for your menu options. The plugin will allow you to set the speed, appearance, and a toggle switch.

0 comments:

Post a Comment