> Follow along floating layer

float

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.





Overview

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.

/Share the joy

/Reactions

  • Sweet, man! Can be very useful. Thanks for sharing. :)

    Reply
    • Author: H4CK3R
    • Posted on: 2010/09/13
    • At: 19:18

    Wow, thanks for this script. I’ve seen this type of thing used on lots of webApps.

    Reply
    • Author: Jeff
    • Posted on: 2010/09/18
    • At: 21:41

    You are amazing! Thank you so much, this is exactly what I needed.

    Reply
  • Amazing script man! Bookmarking your website now.

    Grtz

    Kev

    Reply
    • Author: hamzty
    • Posted on: 2010/09/20
    • At: 15:12

    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…

    Reply
    • Author: Ralf S
    • Posted on: 2010/09/21
    • At: 12:34

    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.

    Reply
    • yes, hiding when scrolling down is a nice feature to add. Added to my to-do. Floating with offset (ie: the footer) is slightly more complex.

      Reply
    • Author: Linda
    • Posted on: 2010/09/26
    • At: 21:16

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

    Thanks for your work,
    Linda

    Reply
    • You need a custom version, but shouldn’t be horribly difficult to accomplish.

      Reply
    • Author: Adam
    • Posted on: 2010/09/28
    • At: 04:24

    Would love to see a working example of footer implementation! Would really save me!

    Reply
  • 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

    Reply
    • on iOS4 they are using a scrolling div. On Android and older iphones they are still using the follow along floating layer

      Reply
    • Author: Peter
    • Posted on: 2010/10/11
    • At: 19:18

    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?

    Reply
    • Author: Peter
    • Posted on: 2010/10/11
    • At: 22:51

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

    Reply
    • Author: Peter
    • Posted on: 2010/10/13
    • At: 02:04

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

    Reply
    • Author: John
    • Posted on: 2010/10/16
    • At: 15:40

    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?

    Reply
    • probably setting a timeout that refreshes the layer

      Reply
  • You can edit audio files with audacity.

    Reply
  • 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.

    Reply
    • eheheh, not my fault… adress your complains to Google :) I’m doing nothing nasty to trick search engines.

      Reply
    • Author: Ed
    • Posted on: 2010/10/28
    • At: 16:52

    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?

    Reply
    • Author: Yacine
    • Posted on: 2010/11/13
    • At: 09:48

    Hi, thanks for the script, can you tell as how we can make the position bottom, thanks.

    Reply
  • 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.

    Reply
    • Thanks for the bug report, I’ll look into it.

      Reply
    • Author: Chris
    • Posted on: 2011/02/17
    • At: 03:27

    Awesome!! Thanks! Would love a bottom div version too :)

    Reply
    • Author: Joe Howse
    • Posted on: 2011/04/09
    • At: 05:36

    Thanks, this script helped me! It would be nice to have options to restrict the motion to horizontal or vertical.

    Reply
    • Author: Iain
    • Posted on: 2011/05/09
    • At: 19:49

    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?

    Reply
      • Author: Alex Zylka
      • Posted on: 2011/06/10
      • At: 19:21

      Have you tried window.scrollTo(x, y)? The menu will follow when you try that.

      Reply
        • Author: Jules Holleboom
        • Posted on: 2011/08/23
        • At: 13:25

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

    • Author: benk
    • Posted on: 2011/06/06
    • At: 19:00

    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 ?

    Reply
    • Author: Alex Zylka
    • Posted on: 2011/06/10
    • At: 19:15

    Great work Matteo! I know you’re busy working on iScroll, but here’s something that’s baffling me. Whenever I implement this script, for some reason my radio buttons disappear. I’m not using a nav, but rather a div to be my following layer. Any ideas why this might happen? It seems to only be with Webkit…

    Demo (with float): http://www.alexzylka.com/save/float.php
    Demo (without float): http://www.alexzylka.com/save/no_float.php

    Reply
    • Author: Furk You
    • Posted on: 2011/08/12
    • At: 12:32

    Dude, thats a amazimg Script ;D

    Reply
  • Still pondering this one…

    Ever think over where to venture off to for a weekend and end up going nowhere but wishing you had….

    Reply
    • Author: Niklas
    • Posted on: 2011/11/29
    • At: 09:46

    Thanks,
    Looks good but,

    On my website http://www.hoek.dk the script acts strange when viewed on the chrome browser

    Reply
    • Author: Jeff
    • Posted on: 2012/09/19
    • At: 04:40

    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?

    Reply
    • Author: arpita
    • Posted on: 2012/10/18
    • At: 12:55

    Hey the demo is not working

    Reply

/Leave a reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>