CODEWITHSUNDEEP
jqueryjquery-mobile
cusejuice
cusejuice

Reputation: 10681

jQuery Mobile Fixed Toolbar Fade Out on Scroll

I am trying to mimic the following page in terms of the fixed header functionality. http://jquerymobile.com/demos/1.0.1/docs/toolbars/bars-fixed.html

However, with the newer release of jquerymobile, I believe they removed that fade in/fade out functionality on scroll.

Is there a way with the new jquerymobile release to mimic that behavior?

Upvotes: 1

Views: 4147

Answers (2)

frequent
frequent

Reputation: 28503

Do you want to use this behavior for toolbars?

Then you can also check the JQM 1.1. release notes, it includes a link to a polyfill to use the old the fixed toolbar behavior.

Here is the preview URL and Github repo

If you want to use the behavior for some other elements (header/footer any element you like), I took a function from the polyfill to reposition on show() and am using it like this:

// reposition before showing - based on JQM fixedtoolbar polyfill   
var $popPanel = YOUR_ELEMENT(S) to be repositioned
$popPanel.jqmData("fixed") == "top" ? 
    $popPanel.css( "top", $( window ).scrollTop() + "px" ) :
        $popPanel.css( "bottom", $wrap.outerHeight() - $( window ).scrollTop() - $.mobile.getScreenHeight() + "px" );

This will repositon elements, which you need to add data-fixed="top/bottom".

To transition-in the elements I'm using:

// show $popPanel
$popPanel
    // add transition class - this is using slide
    .addClass('in')
    .show('fast')
// clean up
window.setTimeout( function() {
    $popPanel.removeClass('in');
    });

I liked this functionality in JQM 1.0, but I think the polyfill is even better, because I'm getting by with just this one snippet vs. needing the full old-fixed-toolbars handler.

Upvotes: 0

Jasper
Jasper

Reputation: 76003

If you are using data-position="fixed" toolbars then you should be able to add a couple data-attributes to the tag to allow "toggling" the toolbar:

<div data-role="footer" data-tap-toggle="true" data-transition="fade">
    ...
</div>

Documentation: http://jquerymobile.com/demos/1.1.0/docs/toolbars/bars-fixed-options.html

That will work for taps, for scrolling I believe you have to use your own event handler:

//when a user starts to scroll, hide the toolbar(s)
$(window).bind('scrollstart', function () {
    $.mobile.activePage.children("[data-position='fixed']").fixedtoolbar('hide');

//when a user stops a scroll, show the toolbar(s)
}).bind('scrollstop', function () {
    $.mobile.activePage.children("[data-position='fixed']").fixedtoolbar('show');
});

Here is a demo: http://jsfiddle.net/BCTpK/

After making the demo I realized that setting a timeout so that the scrollstart and scrollstop events don't fire too often is a good idea:

var timer = null;

//when a user starts to scroll, hide the toolbar(s)
$(window).bind('scrollstart', function () {
    clearTimeout(timer);
    timer = setTimeout(function () {
        $.mobile.activePage.children("[data-position='fixed']").fixedtoolbar('hide');
    }, 100);

//when a user stops a scroll, show the toolbar(s)
}).bind('scrollstop', function () {
    clearTimeout(timer);
    timer = setTimeout(function () {
        $.mobile.activePage.children("[data-position='fixed']").fixedtoolbar('show');
    }, 100);
});​

Upvotes: 1

Related Questions