You have to do it yourself. Do exactly what you said:
- Detect scrolling. I find it convenient to set some CSS class on
the page while scrolling. e.g. is_scrolling
You can use
scrollstart
scrollend
events.
$(document).on('scrollstart scrolled', '.ui-page', function(event) {
var $page
= $(this);
if
(event.type == 'scrollstart')
$page.addClass('is_scrolling');
// Optionally,
hide footer here using API
else {
$page.removeClass('is_scrolling');
// Optionally
show footer here using API
};
- Hide footer when scrolling starts
- Unhide footer when
scrolling ends or at top
Alternately, you could just
use CSS to hide the footer. This is why it is so handy to just add a
CSS class to the page when scrolling. Of course, you can then apply
ANY CSS you might like while scrolling.
.ui-page.is_scrolling .my_footer{
display:none;
}
- Enable tap-toggle, unless
you DON'T want the user to also be able to tap to hide.
Otherwise you can use a
vmousedown
event.