Axure - Create Scroll Spy and Sticky Nav Bars like Twitter Bootstrap

Have you seen Twitter Bootstrap and liked scrollspy javascript? Perhaps you want to use it in Axure to create floating navbars and sticky toolbars?

Are you impressed by Twitter Bootstrap? Some are, some aren’t - but I don’t know what the fuss is about - if you’ve got an amazing framework that is responsive and ready to go for your next startup - what’s not to love about it? It saves some design time and some development time.

Crazy Flicker - detecting scrolling

Following on from this post about detecting scrolling and showing nav bar changes in Axure - I thought it should be possible to create the scrollspy effect and also to change navbars.

Thanks to Paul’s suggestion of image map regions and what he calls Crazy Flicker it’s very easy to detect scrolling and move dynamic panels.

The results are great!

How to do it?

1. Make a nice nav bar in a Dynamic Panel and using Axure 6.5 new Pin To Browser set the Nav Bar to always be on top.
2. Make a nice tool bar - and make 2 states - one state is the full-width sticky nav the other the toolbar.
3. Make your own Crazy Flicker (a dynamic panel with an image)
4. Add image map regions like top and bottom
5. Programe the Dynamic Panel Crazy Flicker using onShow to detect what image map the Nav Bar is on top of and show the right dynamic toolbar state
6. Generate your prototype 🙂

Problems?

• No it’s not that easy - there is a lot of trial and error to get the top nav bar in front of things (watch out if you use Masters and the Navbar is in the background.
• Masters - don’t make it all work then change your Dynamic Panels to Masters - it will break all your programming
• Label everything - so when you program buttons and navbar changes, the effect shows up on the right widget!

Have you tried this?

Meet the author

Damien Saunders
An experienced management consultant and business leader interested in digital transformation, product centred design and scaled agile. If I'm not writing about living with UCTD (an autoimmune disease), I'm probably listening to music, reading a book or learning more about wine.