Question

I am trying to create the typical header footer for a web app that stay fixed in position. This is tricky om mobile phones because their browsers are not really good with css position:fixed.
So my goal is to detect the scroll event, then reposition the elements using position:absolute. I wrote this code:

    $(window).scroll(function () { setHFPos(); });
    $(window).resize(function () { setHFPos(); });

This works ok, aside from one fact, Android scrolls the page before firing the scroll event, and so my footer scrolls up the page, before repositioning.

Ideally what I’d like is to find an event that occurs when the user touches the screen before the scroll gesture, however, I have tried both mousedown and mousemove and neither fire during a scroll gesture. I tried:

$("body").mousedown(md);

Which is called on a tap, but not on a scroll gesture.

Does anyone have suggestions as to a suitable event that I could hook into?

Answer 1

touchstart touchmove touchend

https://dvcs.w3.org/hg/webevents/raw-file/tip/touchevents.html#the-touchstart———event

There’s a reference page.

You can bind them using

$('#id').bind('touchstart', function() { });