Geek Answers Handbook

Hiding and showing div while scrolling page on iphone

You must display an element ( div ) at the top of the web page. During scrolling, the item should disappear and reappear after scrolling is complete.

To add to the complexity:

  • our code is guest code (thus, we cannot manipulate the structure of the DOM, etc.).
  • Our code is designed to work on iPhone / iPad (Safari mobile browser).

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

We are looking for a suitable way to control the (re) element with minimal impact on the user when scrolling.

+7
source share
3 answers

In the latest version of iOS (5.x), fixed positioning ( position:fixed in CSS) is freely supported, so that your element will be located on screen coordinates. This can be a good starting point to solve your problems.

0
source

I would think Javascript is your best solution. You can dynamically embed a DIV in any content using document.createElement and then add javascript to listen on onScroll ...

You can even populate the DIV using custom HTML built from your own code if you want.

Any help?

+1
source

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

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

+1
source

More articles:


All Articles