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

rp-7
#21

Great work guys! Love the feature!

I’ve a small problem regarding the onScroll event. I want to set up a panel, which disappears while scrolling and is shown again at a pinned position when I stop scrolling the page. When I toggle the visibility of the panel in the onScroll Case, the panel reacts a Stroboscope. Any suggestions to handle this?

See it!

#22

Hi guys, great to see this new feature in action. Was just wondering if it would be possible to also add an OnScrollStop event; right now, OnScroll stands as an OnScrollStart event. Let’s say that I want to display a dynamic panel ONLY when scrolling takes place, and hide it when there is no active scrolling. I was thinking how to achieve this using the OnScroll event but the only way that I could accomplish this effect, in the end, was going back to the crazy flicker! Any idea on how to achieve this without flicker? In any case, it would be very handy to have two separate OnScrollStart/OnScrollStop events, also considering that in the example that I am pointed at, one might also want to add some extra features like hide with delay, and in such case, an easy-to-trigger event would be a very nice solution to hand.

Page-associated events:

Flicker-associated events:

rp. file attachedTest OnScroll.rp (53.7 KB)

I was also wondering what are the variables that I can use on Ax7. In this example, I used Window.Scroll because I’ve seen it used in Paul’s post, but I don’t have any reference on what other variables can be used. I already looked at the ‘V7 variables list’ page but the links lead to external pages where I could not find any occurrence of Window.Scroll. And for practical reasons, it would be nice to have a list of useful variables that can be used in Axure 7. Thanks!

#23

I would use a fade of 20ms onShow “Your are not scrolling”

#24

Hi MartinB,
I’m struggling with the same issue can’t figure out your solution. Can you please explain in more detail?
Thanks!

#25

Hi shigu,

Well, my idea was that if an object changes quickly and thus causing a stroboscoop effect you could apply a fade in. The effect is that the object doens’t show full until fade time has been reached. Thus, it will not flicker. Make sure fade in time is long enough.

Hope that explains it.

Cheers
Martin

#26

Yes, thank you!

#27

So cool :thumbup:

#28

Hey Paul, is there any documentation on the various window properties that we have access to? I would like to be able to tell whether the scrollY is increasing or decreasing (is the user scrolling up or down?)

I did discover that you can display the window.scroll property value by assigning it to widget text, which helps a lot for debugging.

#29

Hi Ian - This is a pretty cool little hack that lennart built… check it out Any way to tell the direction of vertical scrolling?

#30

What is the better solution?

  1. Use two header with the same content (header is probably a master page).
  2. Use a single header which moved dependent on window.scrollY value without any pinned to browser stuff.

Some pros/cons:

  • The redundancy of two headers adds a lot of noise to the prototype
  • Pin to browser on/off is unfortunately not available as interaction
  • Manually positioning instead of pinning looks of course not as clean as pinning
#31

Hi Kip

I’ve just downloaded your file and published the prototype. But the scroll-thing doesn’t work, even the header isn’t sticky.

I’m using Axure V 7.0.0.31.31 and Firefox 25.0.1

thank you

#32

I’m not entirely sure how this works. I see the cases in “Page Interactions” which calls the panel-scroll, but where are the cases that tell it to stay sticky at the top and in that specific position? There doesn’t seem to be a hidden panel for the “panel-scroll” in the main comp and there doesn’t seem to be any conditions in the states of the dynamic panels.

#33

Hey 127.0.0.1,

The Dynamic Panel called “panel-original” is the movable version of this menu bar. The one called “panel-scroll” is pinned to browser (using the option found in the context (right-click) menu).

You can’t see “panel-scroll” on the page right now because it’s hidden by the topmost image placeholder on the page. If you delete that image you’ll see “panel-scroll”, a hidden Dynamic Panel.

As you saw, the OnWindowScroll Page Interaction determines when “panel-scroll” is set from hidden to visible.

Best,
Rachel

#34

This is a great feature, however I would like to get it working in a master, and it only seems to work on the page OnWindowScroll event.

For instance, I have a navigation bar as a master. When I scroll, I want a DP in the navigation to show. This works if I create the action in the Page’s ‘OnWindowScroll’ event, but not in the master’s.

Am I missing something?

#35

Thanks for the report. There was a bug here that should be fixed in the latest version, 7.0.0.3146, Update To Latest Version | Axure.

#36

Cool, will test it out :slight_smile:

#37

" Hi there I’m having some trouble trying to get it to stack with other on scroll events. The user experience I’m aiming for is that the further someone scrolls down the -big-one-page-site- as certain sections are passed they add to the sticky nav.
Here’s the conditionals I’ve been working with.


I was wondering if the issue was because case 3 has an ‘Else’ in it rather than just and ‘If’ :confused:

Any help much appreciated,
K"

Bingo!
I’ve answered my own question. You can “toggle ELSE IF/IF” by right-clicking on the case itself.
I’ll leave this here for others. Admin’s please remove if you think it’s clutter. :slight_smile:

#38

Hey,

I’m trying to recreate the original example posted by Paul. I haven’t built too many complicated interactions in Axure before so apologies if the following is a dumb question.

I totally get the logic being put in to practice here but I can’t seem to get it to work. The version of Axure I’m using doesn’t seem to have an event for OnWindowScroll I only have OnScroll, see attached image.

I’ve downloaded Paul’s file and it still works but I can’t see where the cases have been added. They’re not visible in the main edit view or when viewing the dynamic panels.

Can anyone help? Thanks in advance


#39

you find it in the window at the bottom (page interactions).

#40

Is there anyway to do this upside down? The same exact behavior, only on the bottom of the screen. As you scroll down, it becomes pinned and as you scroll up it expands?

This is the effect I’m looking for:

http://www.neulastahcp.com/