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:
- our code is a guest code (thus we cannot manipulate DOM structure etc).
- 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.
In recent iOS version (5.x) fixed positioning (
position:fixedin CSS) is fluently supported, so that your element will be positioned on screen coordinates. That might be a good starting point for solving your troubles.