I'm somewhat new in this area. I've implemented overlays in my page at aktrailhead.com. For instance, look at http://aktrailhead.com/baldy/baldy.shtml
The problem is, the overlay always stays in the same place in the browser window, even when scrolling up or down. The rest of the page moves up or down accordingly, while the overlay never moves whatsoever.
This is a problem on small screens (such as tablets), because the bottom parts of the overlay, cut-off by the small screen, remain out of reach.
To test, open an overlay in the link above. Then, adjust your browser window's size, so the bottom of the window cuts the page off - and therefore needs scrolling. You'll notice how the overlay's lower section is not accessible, in this scenario, while the rest of the page scrolls (like it should).
Perhaps this is a matter of the overlay positioning relative to the browser space, rather then the page itself? I imagine if it were positioned relative to the body element it would move up or down accordingly. I don't know, but I hope this is an easy fix. I've tried fixing this with CSS, but so far no luck.
I figured this out, with the help of: http://jquerytools.org/documentation/overlay/index.html
While calling overlay() in your code, the fixed property can be changed to false.
In my case:
... overlay({effect: 'apple', top:10, fixed:false}) ...
Really easy, solves the whole problem. Now the overlay scrolls properly with the rest of the page. I'd have found it sooner, but the terms were too vague for google, and the "Jquery Tools" webpage wasn't that helpful in directing me to the answer right away. In any case, works like a charm.