A study by Smashing Magazine conducted in 2012 revealed that “sticky menus” are 22% easier to navigate than menus that scroll out of sight. The reason is simple: users find what they are looking for more quickly if they don’t have to scroll. What’s more, without knowing why, all participants of the study showed a preference for fixed navigation menus. So, in this post we will take a look at how to create a fixed header section on a scrollable page in Pidoco that can be used for navigation and other content. And here is how it goes …
1. Setting up the project
Simply speaking, a fixed header (aka: “sticky header”) is a section of a page that has a fixed position at the top of the screen and doesn’t disappear when scrolling the page. Probably the biggest advantage of a fixed header is that it allows the user to easily and quickly jump from the bottom of a page to the top without the need to scroll up the entire page. To build our fixed header we will use two pages, an element called “scroll frame”, and a little trick: We simply divide the page into a fixed header section and a scroll section and only let the content of the scroll section (defined by the scroll frame) scroll. The other page will just serve as a container for the scrollable content and be linked into the main page.
As an example, I have chosen the “New contact” screen of an imaginary address book app. The sticky header section of the screen contains a navigation bar that gives the user two main options: going back to the contact list or saving the new contact. The section below the header lets the user add contact details and is scrollable due to the many options including name, address, telephone number etc. Here’s a preview of what my finished address book will look like.
Preview of the sticky header project
2. Creating the sticky header
We start off with creating the sticky content of our screen, i.e. the section containing the fixed header. To do so, create a new page (smartphone portrait format) and add all elements that should not scroll with the page. In my example, this includes a status bar as well as a navigation bar with a title and two navigation controls.
Adding content to a page to create a fixed header
3. Building the scroll section
Now let’s create the part of the screen that that will scroll. To do so, add a scroll frame stencil to the page and resize it to cover the entire part of the screen that should scroll.
Defining the scrollable section using a scroll frame stencil
Now open the context menu of the scroll frame and click the “Create a new page” option from the “Target” dropdown. This will do two things: Create a new page, which be the container for the scrollable content of the main page, and link the new page into the main page via the scroll frame.
Linking a new page into the scroll frame element to build a scroll section
4. Adding scrollable content
Now, all that’s left is adding the scrollable content to the new page. To actually be scrollable, however, the new page must be longer than the main page. So, make sure to increase the length of the page.
In my example I added several text input elements and text elements as well as icons to create a complete contact details form, including even a profile picture.
Changing the length of the page
Finally, we can preview the result by clicking on the “Simulate” button in the toolbar. Here is what my finished project looks like.
That’s it! You have successfully created a scrollable page with a sticky header! Do you need help with your project? Then do not hesitate and drop us a line via support@pidoco.comor Facebook and Twitter.
Happy Prototyping!