In a previous article on the blog, we have seen how to prototype a fixed-positioned menu in Axure. I realized this was a bit of a specific case, as the horizontal menu takes the whole page width, which makes it kind of easier. In this new tutorial, I propose to follow a step-by-step process to prototype a sticky element in the page. As a reminder, this applies when a simple Pin to browser is not sufficient, especially when the element to fix is not exactly on top of the page.

View the HTML prototype demo on Axshare or download Axure source

The concept is pretty simple:

1. we place 2 transparent zones, one pinned on top of the page, and one at the bottom of the element.
2. we create 2 versions of the element to fix, each a dynamic panel, and we set one as Pin-to-browser.
3. when scrolling, if area of unpinned element gets over top zone, then we switch to show the pinned element.
4. and once are of pinned element is not over bottom zone, then we switch back to unpinned element.