Monaca Onsen UI Discord Chat Github Repo

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:
    https://community.onsen.io/topic/3437/place-content-between-ons-toolbar-and-ons-tabbar

    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?