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

rp-7
#41

You have many script but i can’t read this, can you make the video for your any new script?

#42

DarbyJones,

Based on the website Neulasta, I put together a quick example on a possible way forward–it’s pretty low tech but it could work! Check out the Actions and Conditions in the OnWindowScroll Event:

StickyFooter.rp (53.4 KB)

Naturally, there may well be a more efficient way to do this, for example by tracking the y-coordinates of the Widgets and sticky footer menus. However, there seems to be a limitation in that approach, which I can look into further if the attached sample doesn’t quite work. Let me know!

Tranduyninh,

Regarding your post:

You have many script but i can’t read this, can you make the video for your any new script?

Can I assume you’d like a video of the original example by Paul? Let us know–thanks!

Alex

#43

Hi Paul,

I’m trying to implement sticky headers ala your example above. I’ve downloaded the original file you posted, but (like some other people on this thread) though the sticky header works in the downloaded file I’m unable to see the interaction you built, for some reason the cases don’t appear in the interactions panel, so I can’t copy or duplicate them.

I’ve rebuilt the interaction from your screenshot into my own file, but have failed to get it to work. Is there any way you could have a look at my file (attached) and suggest a fix?

I’m running Axure Pro 7.0 on a mac.

Cheers and thanks,

Chris



Docking-Header.rp (1.38 MB)

#44

Hi cgpryor - The interactions are on the page level (not on the dynamic panel itself). You can find the OnWindowScroll in the Page Properties Pane (bottom center) and the interactions will be all there!

#45

Hi Paul

Is there a way to hide the dynamic panel again towards the end of the page aigain? In other words: how can I bring the panel to front in between two specific Y-position?

Thanks!

#46

Of course there is, you just have to combine logic on your conditions. If you want it to appear after point A and only up to point B, you add the combined condition

If [[Window.scrollY]] is greater than or equal to A; and
if [[Window.scrollY]] is less than B
Show panel.

Else if True (This is basically a case that follows a condition that does not have a condition itself)
Hide panel.

#47

It all seems so simple afterwards.
Thanks a lot James!

#48

lol It always does.

Remember, everything - Every. Single. Thing - in the whole universe is easy. Provided you know the answer…

#49

Thank you Paul for your help!

#50

Hi all,

This thread is amazing! Thanks to all you gurus out there : )

I made my own OnScroll sticky nav bar using a main visible panel and a second hidden panel. I’m having an issue where the OnScroll triggered nav bar leaves its x0 y0 alignment and pops out to like 30 on the x axis.

PinOnScroll_HALP!.rp (316 KB)

Whyyy is this happening? I’ve triple-checked it and can’t see why it would pop out in the middle of the page like that. Can anyone help an Axure newbie out :eek:

Thanks in advance!

#51

the sticky property horizontally align center is checked. check horizontal pin left and it will work fine.

#52

Aiiii I’m embarrassed it was so straightforward, and very thankful to you for helping me out! Have a great weekend : )

#53

Hey guys,

Are there any plans for a [[Widget.scrollY]] ? Or is there something similar that we can use?

Thank you!

#54

That’s already there. You can use it in the form of [[This.scrollY]] or [[LVAR.scrollY]] where LVAR is a scrollable widget.

I’m guessing you could probably use it in the form of [[Target.scrollY]]. I never have, because I can’t think of an instance where that would make for a practical application.

#55

Now we are talking!

#56

Hi Thanks for this.

How can I scroll like netflix does when I search for a movie? Netflix has vertical scrolling per row and horizontal scrolling for everything?

Thanks in advance.
Fabs

#57

Hi fantonin,

If you’re looking for the kind of interaction on Netflix’s home page, you can accomplish this by grouping similar movies together into dynamic panels. You could have 2000 pixels worth of images arranged horizontally, but then make your dynamic panel only, say, 800 pixels wide. Then set its scrollbars to “Horizontal as needed”. Arrange a few of these dynamic panels on the page, and you’ve got movie categories that scroll horizontally while the whole page scrolls vertically. Check out the attached file; I hope it helps!

MovieSearch.rp (77.8 KB)

Regards,
Jonathan

#58

I have created an example of a sticky navigation panel positioned on the right side of the page. It is similar to what you see on this page Getting started · Bootstrap

Live demo is here Untitled Document
Sticky Navigation Panel.rp (151 KB)

#59

Can this sticky element be recreated in a dynamic panel? Scenario - I have a DP that has a vertical scroll and I’d like to have a sticky panel appear on scroll. This method uses the OnWindowScroll interaction, but this doesn’t seem to have any effect on DPs that scroll.

Thanks
Reg

#60

Hey Reg,

The OnWindowScroll action likely won’t work because that only fires when the browser window itself is being scrolled–scrolling within a dynamic panel doesn’t scroll the window. That said, dynamic panels have their own OnScroll event that you could try using instead.

You could try overlaying a hot spot widget on top of your scrollable panel where you want the showing of the pinned panel to be triggered. You cold then set up something like this:

OnScroll, if area of hot spot is over area of (whichever widget will trigger your panel’s visibility), then show pinned panel. Else if true, hide pinned panel.

Maybe that will work for you!