"floaty bar" for Gmail for mobile

Latest version of Gmail for iPhone and Android devices, comes with novel menu actions: a context-sensitive, always-accessible UI element that follows conveniently as a user scrolls, called "floaty bar". The essence here’s that when the viewport scrolls, the floaty bar 'top' is set to the new viewport offset. The -webkit-transition rule specifies the animation parameters. The 'top' property is to be animated, […]

Latest version of Gmail for iPhone and Android devices, comes with novel menu actions: a context-sensitive, always-accessible UI element that follows conveniently as a user scrolls, called "floaty bar". The essence here’s that when the viewport scrolls, the floaty bar 'top' is set to the new viewport offset. The -webkit-transition rule specifies the animation parameters. The 'top' property is to be animated, over 0.2s, using the ease-out timing function. This is the animation behavior launched, and it works just fine on Android and mobile Safari browsers. A better way to achieve same effect is using CSS transforms (implemented in iPhone OS), a mechanism for applying different types of affine transformations to page elements, specified via CSS, Code blog.