Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Create a Parallax Scrolling Header with Tabs in Android

  • Hi all,

    I am new in OnsenUI and I find it really cool framework to develop Android and IOS apps. However I was trying to do the Scrolling Heading Effect that is so user-friendly in Android.

    I was looking a solution in OnsenUI and Jquery. Please help.

    The image will tell the thing that I am trying to do in OnsenUI and Jquery.

    scrolling head

  • administrators

    First have a look at this thread to see how to add a tabbar image like in your “Before” picture:

    After that you’ll some special CSS and maybe some extra JavaScript to expand and collapse the tabbar.

    Can you provide some details about how the Scrolling Heading Effect is supposed to behave? For example:

    • Can the user swipe on the image at the top to change the tab?
    • Does the image stay the same or does each tab have its own image?
    • What does the user do to expand or collapse the tabbar?