Justinmind

SUPPORT

Learn how to prototype web and mobile apps

How to scroll between fixed bars in your mobile app wireframes

Scroll between fixed bars in your mobile wireframes. This tutorial will show you how to simulate scrolling between a fixed header bar and a fixed footer.

You can download an example here.

1. First of all, create a new mobile wireframe starting from an iPhone screen.
2. Drag and drop your background, header bar, and footer bar.

how to fixed top and bottom bar - step1

Tip: Remember that you can find bars and other ready-made elements in the iPhone iOS8 widget library on the left side of your canvas. If the library is not there already, you can add it by clicking on the ‘+’ button at the top of the Widgets bar.


3. Place all the elements you’ll want to scroll through on the screen, as far down below the screen as you want to be able to scroll to. In this example, we only added a Rectangle widget at the top of the screen and a Rectangle widget at the bottom, as you can see in the image.

how to fixed top and bottom bar - step2


4. Select the items you just added (but NOT the header and footer), right click and choose the “Group in Dynamic Panels” option.

how to fixed top and bottom bar - step3


5. Make sure  vertical and horizontal scrolls are set to “automatically” in the Properties of the Dynamic Panel.
6. Resize the Dynamic Panel to fit the main phone screen.

how to fixed top and bottom bar - step4

Now you can click on ‘Simulate’ and enjoy the scrolling between header and footer!

Next tutorial > Simulate Breadcrumb Navigation in your interactive wireframes

7 Comments

  1. Roc

    September 16, 2015 at 5:20 pm

    It should have a better solution. If you you’re working with many content, you can’t put everything inside dynamic panels.

    • admin

      September 17, 2015 at 11:07 am

      You can put as much content as you wish in a dynamic panel. Have a look at this example. You can also download it here.

  2. cory Says :

    October 29, 2015 at 7:31 pm

    I’m working on an android prototype where a screen has three tabs that the user will toggle by swiping horizontally. How do I do this?

    • Danielle Schneider

      October 30, 2015 at 12:20 am

      Use a gesture event: on swipe left or right -> set active panel [one of the tabs].

  3. Felix Frank

    November 23, 2015 at 10:42 am

    Im working on android and i cannot fix anything. How do i do this for android?

    • Danielle Schneider

      November 23, 2015 at 9:59 pm

      There shouldn’t be any difference in this process for Android vs. iPhone. What happens when you try to do this?

      • Felix Frank

        November 23, 2015 at 10:01 pm

        My fixed objects (not in a dynamic pattern) moves with the dynamic pattern. Like it would have no influence