Hiding and showing div during page scroll on iphone

Question

Need to display an element (div) ontop of webpage. During scroll the element should disappear and reappear after scroll ends.

To add to the complexity:

1. our code is a guest code (thus we cannot manipulate DOM structure etc).
2. our code is intended to work on iPhone/iPad (mobile Safari browser)

We've tried to listen to touchstart event on document / body and hide the element (div) in our dedicated handler. However, in some sites, (when DOM structure becomes reasonably complex) the scroll response time increases significantly, even if handler implementation is entirely empty.

We are looking for the proper way to manage the element (re)appearance with a minimal affect of the user experience while scrolling.

Answer 1

I would think Javascript is your best solution. You can dynamically insert your DIV to any content using document.createElement, then also add some javascript to listen for onScroll...

You could even populate the DIV using custom HTML built from the native code if you want.

Any help?

Answer 2

I don't know if you are a jQuery user, but this .scroll() function may help you do exactly what you want to do. Check out the demo to see how it works.

http://api.jquery.com/scroll/