Create a sticky header effect by using [[Window.scrollY]] in an OnWindowScroll event to show and hide a pinned navigation bar when the user scrolls down to a certain point on the page.
- [Instructor] I've opened up a hotel website here.…When this site first loads,…there's no header or top navigation showing.…But as we scroll down, you'll see the navigation bar is here…and as we scroll past it, it sticks to the top…of the browser window and then stays there as we scroll.…When we want to prototype a sticky header like this in Axure…one way we can do it is to make a copy of our header…and then set the copy so that it's pinned…to the top of the browser window,…then we can use the on window scroll event…to show and hide the pinned header…as we're scrolling up and down the page.…The first thing we're going to need…is a copy of our navigation bar here.…
I'll hold down the option key,…that would be the Alt key on Windows,…and drag out a new copy.…And then I'll move it up to the top of my prototype…by going to the style panel and using coordinates…zero, zero for the x and y coordinates.…That'll move it right up to the top here.…I'll rename this navigation panel sticky header…because this is the one that we're going to…
- Using variables in Axure
- String methods in Axure
- Truncating text strings
- Formatting dates and times
- Setting up a looping animation
- Setting up a responsive background image
- Positioning widgets in the browser
- Repeater and item properties
Skill Level Advanced
1. Widget Properties
3. Dates and Times
4. Window Properties
5. Repeater and Item Properties
6. Global Variables
Global variables2m 14s
Using plugins on Axure Share2m 49s
8. When Things Go Wrong
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.