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

rp-7
#61

Hi, I can’t seem to figure out where to type in the code you have provided, looking at the example I can’t see the code anyway. I am using V7. Any help would be great!!! a step by step guide will help here :slight_smile: I am new to axure!!!

#62

Hi PrototypeD,

Here’s where you can find the OnWindowScroll event to create the needed interactions for this:


To implement the original example, you’ll want to first get a little more comfortable with using Conditions in the tool. Here’s a good start:

Conditional Logic | Axure

HTH!

#63

Hi All,

With a sticky header, is there any option where you don’t hide a version to replace with another? I need something that uses just one dynamic panel.

Im working on a mobile site that would use tabs similar to what you see on Android, so it will be scrollable horizontally. But when the user scrolls down, I want these tabs to be sticky at the top. The problem I would have is if the tabs get replaced by another set of tabs, I cannot guarantee the horizontal positioning of the tabs or which one is selected. This would be very disruptive for the user. is there any way round that?

If this question is in the wrong place, feel free to redirect me.

Regards,
Dan

#64

What I’ve done in the past is to have one menu that actually moves itself as the user scrolls down the page, so that it’s always positioned at the top. The amount you move it is based on the value of the built in [[Window.scrollY]] variable.

You can also set conditions, so that it will only move itself once a certain scroll distance has been reached.

#65

Very cool~ bye bye flicker
Onscroll looks so nice and easy to use.

#66

Alyssa,
Thank you for your post! It is working for me better than determining a pixel depth using the [[Window.scrollY]] variable because the value I enter seems to change when I resize my browser (this is not a definite measurement from the top of the window). I need a solution that will work on various browser heights.

I have a sticky widget (bottom of window) disappearing on scroll when it overlaps a hotspot which is exactly what I want! The only problem is while I am scrolling over this large hotspot, the widget reappears for a second until I stop scrolling at which point the logic kicks back in and the widget disappears again. This creates a flickering effect with the widget appearing and disappearing quickly as I scroll over the hotspot area. Is there any way to get the widget to disappear while it’s over the hotspot whether I am scrolling or not? The case is called “OnWindowScroll” so I figured it should work WHILE you are scrolling but this doesn’t seem to be the case.
Thanks for any guidance you can provide!

#67

Hi mworrest,

Is the action that’s hiding the widget being triggered directly by the “OnWindowScroll” event, or do you have any “show” actions in that same event? If you happen to have multiple conditional cases with different hide and show actions, this could result in the flickering interaction you’re seeing (since conditional cases are evaluated in order).

Would you be able to post a copy of the RP file you’re working with? That’ll help us get a closer look!

unlisted #68
closed #69