© 2002-2018 Axure Software Solutions, Inc. All rights reserved. Axure® is a registered trademark of Axure Software Solutions, Inc.

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

SCROLL-ACTIVATED STICKY HEADER

Learn how to make a header that sticks in place when the page is scrolled down and disappears when the page is scrolled back to the top. (This website features a scroll-activated sticky header—just scroll down to see it in action!)

STEP 0: DOWNLOAD THE TRAINING FILE

If you don't already have it, download AxureTraining.rp and open it up in Axure RP. This file contains pages corresponding to each of the tutorials on the Axure training site. We recommend always completing the tutorials using our prepared file, but if you can't, that's okay too—we'll always tell you what to build in a new file in order to complete each tutorial without using AxureTraining.rp.

STEP 1: SETUP

In AxureTraining.rp, open the page named "Scroll-activated sticky header".


The page contains a group called "Scrolling header".


Right-click this group, copy it, and paste it at the top of the page. Move it to coordinates (20, 20). Name it "Sticky header".


Right-click "Sticky header" and convert it to a dynamic panel. Go ahead and name the dynamic panel "Sticky header" as well.


In the Style tab, click the "Hidden" checkbox.

STEP 2: PIN THE STICKY HEADER

With the "Sticky header" dynamic panel still selected, switch to the Properties tab and click "Pin to Browser".


Click the checkbox "Pin to browser window".


In the Horizontal Pin section, click "Left".


In the Vertical Pin section, click "Top".


Click "OK" to close the Pin to Browser dialog.

STEP 3: ADD INTERACTION TO SHOW STICKY HEADER AND HIDE SCROLLING HEADER

Click a blank area of the canvas to switch to the Page Inspector.


In the Properties tab, double-click "OnWindowScroll" to create a new OnWindowScroll case.


At the top of the Case Editor, click "Add Condition".


In the first dropdown, click "value".


Click the "fx" button next to the second field.


Click "Insert Variable or Function…" above the top field.


In the "Window" section of the dropdown, click "Window.scrollY".


Click "OK" to close the dialog.


In the Condition Builder, click the middle dropdown and pick "is greater than or equals".


Leave the next dropdown set to "value".


In the last field, clear the text and type the number 180.


Click "OK" to close the Condition Builder.


In the left column of the Case Editor, click "Show".


In the right column, click the "Sticky header" dynamic panel.


In the left column, click "Hide".


In the right column, click the "Scrolling header" group.


Click "OK" to close the Case Editor.

STEP 4: ADD INTERACTION TO HIDE STICKY HEADER AND SHOW SCROLLING HEADER

In the Properties Tab, double-click "OnWindowScroll" to add a second OnWindowScroll case.


In the left column, click "Hide".


In the right column, click "Sticky header".


In the left column, click "Show".


In the right column, click "Scrolling header".


Click "OK" to close the Case Editor.

STEP 5: PREVIEW

Click Preview.


Try scrolling down until the sticky header appears and then back up until it disappears.

MORE RESOURCES

CORE TRAINING

Getting Started

Flow Diagrams

Static Wireframes

Interactive Prototyping

Collaboration

TUTORIALS

Interactive Button

Text Link

Show Hidden Widget

Navigation Menu

Tab Control

Lightbox

Flyout Menu / Custom

     Tooltip

Accordion Control

Account Login

Image Carousel

Auto-Tab Fields

Required Fields

Dynamically Set

     Droplist Options

Set Text with Droplist

Pass Text to Next Page

Full-Width Image or

     Banner

Scroll-Activated Sticky

     Header

Slider

Drag and Drop

Embed Media

Scrollable Table

Set Dynamic Panel State

     on Next Page

Table with Images

Terms and Conditions

Custom Icon Button

Custom Text Field

Custom Checkbox and

     Radio Button

Custom Droplist

Custom Datepicker

MOBILE TUTORIALS

Swiping Slideshow

Scrolling Content

Sliding Menu

Toggle Switch

Animated

     Screen Transition

REPEATER

TUTORIALS

Basic Repeater -

     Dynamic Table

Sorting Rows

Filtering Rows

Adding, Deleting, and

     Updating Rows

Marking Rows

Advanced Repeater -

     Product Listing

Reference Pages

Advanced Filtering

Pagination

REFERENCE GUIDE