Response title
This is preview!
Move this topic
Hide fixed footer on scroll
in jQuery Mobile
•
8 years ago
Hi there, Im trying to hide the fixed footer when scrolling down the
page, and again re appear when back to top or on tap.
I can't seem to find a solution or
any posts regarding this issue. Can anyone help please?
1
Replies(5)
Re: Hide fixed footer on scroll
8 years ago
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.
Leave a comment on watusiware's reply
Re: Hide fixed footer on scroll
8 years ago
Thank you for your help on this, would you be able to show me a working
example?
Perhaps using the demo: http://demos.jquerymobile.com/1.2.1/docs/toolbars/bars-fixed.html
Leave a comment on peter111's reply
Re: Hide fixed footer on scroll
8 years ago
This seems to do the trick, more or less...
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
$("#footer").fadeOut('fast');
} else {
$("#footer").fadeIn('fast');
}
lastScrollTop = st;
});
Leave a comment on peter111's reply
Re: Hide fixed footer on scroll
8 years ago
You
will likely have trouble due to duplicate IDs, since in 1.2 you
cannot put footers outside of the page. And, so, you will have
duplicate footers during transitions, and you should not duplicate
an ID in the document.
I
would try to avoid needed to compare the scroll position. It's best to
avoid high-frequency events like scroll. That's why I suggested using
scrollstart/scrollend.
CSS
will give a nicer, smoother fade effect that .fadeIn(), .fadeOut().
Leave a comment on watusiware's reply
Re: Hide fixed footer on scroll
8 years ago
Thank you, what I would really like to achieve is what Pinterest footer
does on their mobile app.
I ran across Toggling the fixed toolbar visibility:
$("[data-position='fixed']").fixedtoolbar('show');
// or
$("[data-position='fixed']").fixedtoolbar('hide');
I tried it but it does not seem to work for me.
Any help would be much appreciated.
Leave a comment on peter111's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to peter111's question