Goodbye Flicker - Hello OnScroll (Example, header sticks when scrolling)

rp-7

#1

It was the best of times, it was the worst of times. We were crazy flickering all night long. But alas! No need for the flicker anymore. In V7, you can now use the OnScroll page event to detect scroll position. Use the variable Scroll.PositionX and Scroll.PositionY.

For example. If you want to make a header that sticks when scrolling, create two different headers. One which is in its regular position, and the other one is at the top of the page, hidden and pinned to the browser. Then you would use OnScroll with conditions to hide and show the pinned header.

See it Live

OnWindowScroll-StickyHeader.rp (64 KB)


#2

Oh HELL yes.
If I had a prototype like the one I had 2 months ago, this alone would save me a days work.
#byebyescrollspy


#3

Awesome, Paul! Love Axure even more :slight_smile:


#4

This is awesome. Quite the time saver!


#5

Paul, is there a list of supported variables? I have a sense of the things you might do with Window, Math, This, and Cursor, but it would have taken me a bit of work to figure out Window.ScrollY held the value I was looking for in this case.

Jeff


#6

I just thought I’d post here an edited version of [MENTION=1782]zinkzone[/MENTION]'s ultra-famous “fashionphotography.com”-esque scrolling sectioned header RP file, which I just modified this morning for a customer. It was gloriously easy to adapt the file to the new OnWindowScroll Event!
Pin Navigation_V7.rp (1.11 MB)


#7

I was just about to ask for the same thing, Jeff! This would be a great help, Paul. Please provide and I’ll also post it on Axureland. Thanks!


#8

Here seems to be a good reference for math:

JavaScript Math Object

Found that here, courtesy of borryshasian:

Is there a list of Math String and Functions

Jeff


#9

Thanks Jeff, yes it’s in the works!


#10

As always you guys rock!! Im gonna have a lot of fun with this Beta version!!! Hope I can post some cool stuff in the next couple of days!!


#11

Oh, yeah! We’ve finally got it! Thanks!


#12

When I set my page align to centre and use this method for a scrolling header, the header snaps to be left aligned. Are you aware of any methods to solve this issue?


#13

Beautiful work Kip!


#14

Pete, in case you hadn’t found it already, you’ll definitely want to bookmark this:

V7 Variables List


#15

I will not weep when I can leave crazy flicker behind. However, any chance that you are also considering a more simple pin/unpin as part of the interaction rather than the 2-panel approach?


#16

Hey, it just doesn’t work on my side. I have posted a bug report here.
Window.ScrollY does’t work


#17

Can someone explain where the “pin to browser” menu went in version 7? I used to be able to right mouse on a dynamic panel and select pin to browser. How do I access that now?


#18

You can access it throug the Widget Properties module. See the image attached.



#19

Hi, and thanks very much for this! I’m just testing out the latest 3113 beta (I have 6.5 installed on the same PC) and since this sounded like a super-sweet feature to have I downloaded the ‘Pin Nav’ RP file with a view to see it in action and to try and learn how you’d done it!

But when I generate the prototype in both FF21 and IE9 I don’t see anything except a big long scrolling page; there is no pinned nav that I can see when I scroll.

Am I doing something wrong? (It’s entirely possible, I’m still mostly a newbie with Axure!)

Best,
CJ


#20

Darn, I really don’t want to appear ungrateful, since this v7 is shaping up to be an amazing release (thank you so much to the developers!), so posting 2 problems doesn’t feel like an apt reflection of my level of impressed-ness!

I’ve just had a play with this ‘see it live’ version and one thing I tried was ‘zoom’ on my browser (ctrl-+ a few times).

When I scroll with the page in a zoomed state it does still cause the pinned nav to appear (yay) but it centres the nav in the browser window instead of showing it with a zoomed-but-in-the-correct-position state. e.g. if zoomed right in then only a bit of the left (say) screen will show, but the nav is centred. This causes issues with nav/pinned material that extends outside the visible frame since they cannot be accessed without de-zooming.

Might this be a glitch, or is this intended behaviour?

Many thanks!

CJ