Parallax website layouts include UI elements that move at different speeds to the site background, or stay fixed while you scroll.
In Justinmind, you can use Pinned Elements to create sticky components that stay fixed in certain positions as you scroll the page.
Pinned top (sticky header)
A pinned top element will stay fixed at the top of the screen while you scroll.
Follow along with these steps to create a pinned header:
- To recreate our example, first drag an H2 widget and three Paragraph widgets from the Web Wireframing UI library (find out how to install this library here) onto the canvas and position them as below.
- From the same UI library, drag a rectangle and two Picture widgets onto the canvas and position them as below. These Picture widgets will represent placeholders in your prototype.
- Alternatively, you can use basic pre-installed widgets like Paragraphs and Images.
- Drag a Header widget from the Web Wireframing library onto the canvas and place it at the top.
- With the Header still selected, go to the Properties palette. Under Position, click on “Display pin position options”.
- In the ‘Y’ parameter, click on the dropdown and select “Pin to top”.
Click “Simulate” and the header will stay at the top of the screen as you scroll.
Pinned bottom (sticky footer)
A sticky footer will stay pinned to the bottom of the screen as you scroll.
Follow the steps below to create a sticky footer:
- Repeat the steps to create a sticky header, but place a Footer widget from the Web Wireframing UI library at the bottom of the screen.
- In the ‘Y’ parameter, click on the dropdown and select “Pin to bottom”.
Now click “Simulate”. The header and footer stay fixed while the background follows the scroll movement.
Pinned to right (Fixed pop up)
A fixed pop up will stay pinned to the right hand side of the screen as you scroll. This can be helpful for showing an important alert or message to users.
Follow these steps to create a pop up fixed on the right:
- Drag a Rectangle widget onto the screen, placing it anywhere on the canvas. Add some text to style it.
- In the Properties palette, under Position, click on “Display pin position options”.
- In the ‘X’ parameter, click on the dropdown, and select “Pin to right”.
- In the ‘Y’ parameter, click on the dropdown, and select “Pin to center”.
Click “Simulate”. The popup will stay pinned to the right of the screen and remain fixed while the background moves.