Sign Up to Subscribe

To get the latest and most quality design resources!

Sign Up to Subscribe

Thank you for your support!

WHAT IS MOCKPLUS?

Mockplus is a faster and easier prototyping tool to help you make prototypes by making interactions with simple drag-and-drop and working on a team project easily and effortlessly. Microsoft, Oracle, Simens, IBM, UBI, Huawei and 300+ global colleges are using it, YOU SHOULD TOO!

Start your free trial

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

Mockplus Team 11593 Views

This article introduces how to make a scroll-activated sticky header with Mockplus, a good-to-use prototyping and wireframing tool.

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. Today, I’d like to tell you how to use "Scroll Box" components with the rapid prototyping tools Mockplus to quickly make a scroll-activated sticky header.

(A) Effect display

Scroll-activated sticky header effect display

So the question comes, how to achieve this effect? In fact, the principle is very simple, you can make it merely by two nested scroll boxes.

(B) Concrete steps

1. Create a new scroll box (scroll box 1), click on the scroll box, put "OK" button and image placeholder in it, as shown below:

Create a new scroll box

2. Nest a scroll box 2 in the scroll box 1, click into the scroll box 2, place multiple image placeholders in it, as shown below:

Image placeholder

3. Double-click the space to exit the scroll box 2. Go back to the scroll box 1 and click on the "+" on the lower right corner of the scroll bar. Adjust the height to make the "OK" button just at the top, as shown below:

Scroll bar

4. Adjust the scroll box 2 to the full-screen height, as shown below:

Second scroll box

5. Exit editing mode of the scroll box, and then the effect can be achieved. Please pay attention to the mouse position during the presentation, when scroll to the area above "OK" button, holding the mouse on the upper area. When scroll to the area below "OK" button, holding the mouse on the lower area, as follows:

Presentation in Mockplus

Demo link: http://run.mockplus.com/lPRDpQEuo5GNNLel/index.htm...


(C) Conclusion

Mockplus is so simple and efficient that you can easily implement scroll-activated sticky header with just two Scroll Box components. If you want to experience the full functionality in Mockplus, please move to https://www.mockplus.com/download to download. If you have any questions, please make a reference on the tutorial page where provides you with rich tutorials and samples. Been familiar with the various components and operation methods, I believe you can make a perfect interaction demo with Mockplus.

STILL HUNGRY FOR THE DESIGN?

_____

Mockplus is a desktop-based tool for prototyping mobile, web and desktop apps easily and quickly. Create interactions by simple drag-and-drop and your teamwork will be time-efficient with the collaboration features.

Free Trial
idoc close

Need help?

Join Mockplus on Slack Click here

support@jongde.com