Been working on sticky nav in V7. The trick that Paul shared in Goodbye Flicker - Hello OnScroll (Example, header sticks when scrolling) with [[Window.scrollY]] works wonderfully (thanks it helped a lot!), but it only works for scrolling to a fixed position.
When I downloaded zinkzone’s famous scrolling section header adapted to V7Goodbye Flicker - Hello OnScroll (Example, header sticks when scrolling) it didn’t work. All I saw in the browser was a long page, and the hidden sticky nav didn’t show.
I tried several other RPs that use the same method to do a sticky nav, showing the hidden dynamic nav over a certain widget when scrolling. But none of them worked for me. Anything wrong?
Browsers:IE8 and Chrome V43.0.2357.124 m
RP: V7.0.0.3184.
It has been working for me. I did not get any issue.
Hi Jessiejea,
You’re right–zinkzone’s example was created in 6.5, and a pretty major component of that prototype no longer works in 7.0. Specifically, the example tests for the area of the hidden navigation panel. Testing the area of a hidden widget worked in 6.5. That behavior was changed in 7.0 to more accurately reflect how actual HTML elements work. Now, hidden widgets don’t have any area.
There are a couple of ways to go about getting the functionality, though. The first is wrapping the “Navigation that shows” panel in another dynamic panel. That parent panel would need to be shown, pinned, and NOT set to “Fit to content”. Then, the conditions that show the navigation header would test the area of the parent instead of the navigation. Here, the parent is always 940x92 pixels, even if the navigation is hidden.
The second option is to add a sibling dynamic panel, not containing anything, that has the same height as the navigation. This would be pinned like the navigation and aligned behind it. You’d change the conditions to test the area of this empty panel, but you’d still show the navigation header. Like in the first approach, this sibling panel always has set dimensions, even though it appears to be empty.
In the file attached, I’ve applied both techniques. Check it out and let me know if you have any questions.
Regards,
Jonathan
Pin Navigation_EDIT.rp (2.19 MB)
1 Like
Hi Jonathan,
Do you have full explanation for the 2 option you mention ? or you tube short film?
I tried to do like you explain but it doesn’t work
Regards,
Gilly
Hi Gilly,
It sounds like you’re building a standard scroll-activated sticky header. Could you try the steps in the following RP 8 tutorial?
https://www.axure.com/support/training/scroll-activated-sticky-header-tutorial
In the original post, the user jessiejea links to a v7 forum thread. Axure RP 8 now also includes the OnWindowScrollUp and OnWindowScrollDown events which can help in this kind of project too. Give that tutorial a shot and let us know; if you run into trouble, also attach a copy of your RP file and we can take a look. HTH!
