How to prototype sticky elements on scroll
By using sticky elements on scroll, you will be able to pin an element to a specific location in your web or mobile prototype, so it is always visible as you scroll down.
This tutorial will show you how to add a sticky element on scroll to your prototype using Justinmind’s Parallax widgets.
Add a Sticky Element to your web or mobile wireframe
To create a sticky element just drag the “Pinned layer” widget from the Parallax elements library onto the canvas.
Once placed, the sticky element will be ready to use. It is a dynamic panel, so you can edit its content as you like.
To see your Pinned layer work during the simulation, add at least another element, and place it at the bottom of the canvas so as to allow for enough scrolling.
Now click on ‘Simulate’: you’ll notice that the sticky element will remain fixed when scrolling.
Tip: Use the Navigator panel on the left of your canvas to visualize the entire page you’re working on. And remember you can let it float and resize it.
Exploring the default events in the sticky element widget
In order to better understand the functioning of these elements, let’s have a closer look at their predefined events.
Three sets of events are in place to provide the interaction: two ‘On page load’ + ‘Set value‘ and an ‘On scroll’ + ‘Move’.
The ‘On page load’ + ‘Set value’ events are applied to the two initial position labels (y and x coordinates) that come with the widget, therefore both of them will be replaced with their initial position value when the page loads. These initial position values are stored to be used later to define scrolling conditions.
When scrolling begins, the panel will ‘move’ to the current visible point.
For the element to remain static at all times, the “Move” action sums the initial position values for x and y that were previously stored and the current scrolling point value (Window Scroll). The result provides the new value needed for the element to remain at the current visible point.
If you wish to go further and edit expressions, you can do so by clicking on the settings icon next to each expression.
Making your web prototype experience unique
This tutorial covers the “sticky element” parallax widget, which you can combine with other design elements to create unique web prototypes. If you are creating a parallax scrolling web design we recommend you check out this handy 5 step guide to prototype with parallax scrolling.
And don’t forget to check out more Parallax prototyping tutorials:
– Create a fixed position menu in your web or mobile wireframe. Learn how!
– Slide-in layers: slide in elements from the outside of the page into the visual viewport as you scroll down. Learn how!
– Pinned panels: pinning panels to a specific position allows you to create fixed/sticky elements that stay in place and are always visible when scrolling. Learn how!
– Fade in layer: provide an initially invisible element that shows up with a transition effect when a defined point has been reached by scrolling. Learn how!
– Scrolling speeds: use different scroll speeds for different elements, in order to provide additional effects to your Parallax scrolling. Learn how!
– Parallax from scratch: create a parallax scrolling effect so that, upon simulation, the elements remain fixed in position on vertical scroll. Learn how!
– Create a one page scroll: create a one page scroll, a single-scroll layout for a group of sections on a page. Learn how!