Sitemaps

Questions

Prototype

How to Make a Scroll-Activated Sticky Header in Your Wireframe Prototype?

Scroll-activated sticky header refers to a header that sticks to the top of the viewport when the page is scrolled down and disappears when the page is scrolled back to the top. To achieve this effect with Axure, the design will be cumbersome, because interactive designers need to insert variables or functions in your wireframe prototype. But how to use "Scroll Box" components with the rapid prototyping tools Mockplus to quickly make a scroll-activated sticky header? Could anyone here tell me?

Answer This Question

1

Answers

Nikos Katsikanis

Tech Entrepreneur & The Nikos Show Podcast host

You need to replicate changing the CSS position style to fixed from static depending on the scroll position of the window. In the browser, you can detect when the scroll position changes by adding on scroll listeners to the document.

In Axure you can add conditions to replicate this: see https://www.axure.com/support/training/scroll-activated-sticky-header-tutorial

Answered over 7 years ago