Learn how to prototype web and mobile apps

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.

Parallax Prototyping: Pinned Layer Widget

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.

Parallax Prototyping: Pinned Layer events

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.

Parallax prototyping: Sticky element expressions

If you wish to go further and edit expressions, you can do so by clicking on the settings icon next to each expression.

Parallax prototyping: sticky element expressions

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 downLearn 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 scrollingLearn how!

– Fade in layer: provide an initially invisible element that shows up with a transition effect when a defined point has been reached by scrollingLearn 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!



  1. Natalia

    August 17, 2015 at 1:28 pm


    I have being using Just in mind for a a bit more that a month. At the beginning I like the interface and the main possibilities, however I have being trying to go deeper and the only think I am getting is just a big Headache. The explanations are not really that clear and there are not so many videos on how to do things. For somebody how does not know some much about code.. it is just too complicated. For example here I want to do some parallax exercise but I the examples are not downloadable and here is like half of the explanation. cause explains the element but thats it. I don´t know I am just kind of disappointed. More Videos would be a really nice way to learn. We need more tutorials not just explanations of the elements,



    • Danielle Schneider

      August 17, 2015 at 10:57 pm

      Hi Natalia,

      We’re working on creating more video tutorials and downloadable examples, which should be available in the near future.