Follow along floating layer

We have to find smart alternatives to meet the lack of position:fixed on iPhone. If you don’t need the complexity of iScroll you may find this script useful. All it does is to move a layer together with the page scroll position. If you are familiar with the mobile Gmail web app you should know what I’m talking about.

QR code follow along

Project info

Project state: ACTIVE (code is actively updated)
Last code update: 2010.09.12 – v0.1
Device compatibility: iPhone/Ipod touch >=2.0, Android >1.6, iPad.
QR Code opens demo page

Support development

If this script saved your day or you wish to support this and other scripts development you may consider sending some funds via PayPal.


This script is so simple that it almost hurts. When the user swipes to scroll, the script checks the new window position and moves a layer of your choice to the new top-left coordinates. Unfortunately –contrary to desktop browsers– the onscroll event is fired only once, at the end of the scroll session. This means that we cannot move the layer in realtime, but it will float to the new position when the page stops scrolling. This very same effect is used by Google on the mobile version of Gmail.

How to use

Create a new instance to the followAlong object onDOMContentLoaded or window load.

var menu;
function loaded() {
	menu = new followAlong('header');

	// Free mem
	document.removeEventListener('DOMContentLoaded', loaded, false);
document.addEventListener('DOMContentLoaded', loaded, false);

'header' is the element ID that is going to be floated around.

You may want to add some styles to the layer once in “floating mode”. The class name “float” is added to the element as soon as it starts floating. Eg:

.float {
	z-index:500;	/* You may need to adjust this value */
	background:rgba(200, 200, 240, 0.7) !important;	/* Make it transparent */

That’s it, hope it can be of some help to some of you. Enjoy.

37 thoughts on “Follow along floating layer”

  1. hey, which value do i have to change if i want to create a second followAlong maybe a footer?

    at this time the second followAlong is placed directly under the first one and a change in position doesnt work of course when site is scrolling…

  2. Nice little brother for the great iScroll !

    How about hiding the header ontouchstart when scrolling upwards? Looks a bit silly now. Or is reading the direction impossible..
    As asked above, a footer in the demo would be nice too.

  3. Is it possible for it to be at the bottom rather than the top?

    Thanks for your work,

  4. Did mobile gmail change how they are doing it, mine on my iphone has a solid top bar that doesnt move like iscroll
    – it doesn’t jump around on the screen

  5. Thanks for this very useful script! I have a background image which repositions well on ipad now, but on iphone there is always a border at the bottom. Any idea?

  6. Please ignore or delete my previous post. Your script works perfectly! I did something wrong woith the div! Thanks!

  7. Hey, you didn’t answer hamzty’s question, how we can achieve a second div moving along – or is it just to simple?

  8. After leaving one page and then returning via mobile safari’s back button on iphone the script doesn’t work anymore! You have any clue how this can be resolved?

  9. Strange this post is totaly unrelated to what I was searching google for, but it was listed on the first page. I guess your doing something right if Google likes you enough to put you on the first page of a non related search.

  10. The script really is very simple and works like a charm on the iPhone. But if You try it in a full screen mode (open the demo page in the safari and add it to the home screen), then it works only partially: on fast, swipe like scrolls, everything is OK. But if we scroll the page with the slow finger movement, then, it seems, scroll event is not fired at all and floating div remains where it was, and can completely scroll out of view 🙁
    Can somebody confirm this?

  11. I believe there is a bug in the script, as it continually adds the “float” class to the header on every scroll, (versus just adding it once). I think you need a conditional around:

    that.element.className = that.element.className ? that.element.className + ‘ float’ : ‘float’;

    to see if ‘float’ has already been added. Also, I don’t believe it’s working reliably on Android, at least on my HTC Aria w/Android 2.1. Not sure what the issue is yet, but on most scrolls it either doesn’t redraw or draws in the middle of the window.

  12. Thanks so much for this, it works great.

    One question – I’ve made a one page website and I’m using anchors/java to scroll to different parts of the page – unfortunately the menu doesn’t follow when you do this. Any thoughts?

      1. Is there no better solution for this? Like updating the window location after clicking?

  13. hi
    are options okay if one wants to “play” with 2 differents div on the page ?
    I guess the parameters to be tweaked :
    that.x1 = that.x2 = myvalueX;
    that.y1 = that.y2 = myvalueY

    what if I got another div but with diff.values ?

  14. Would this be compatible to use simultaneously with iScroll in a JQTouch project? Ie, within a scrolling div, I’d like to have one child div do the follow along behavior instead of scrolling.
    I’m having some trouble getting that to work though. Should it?

Leave a Reply

Your email address will not be published. Required fields are marked *