Pin to Browser action with Scrolling

rp-7
#1

Is there any way to get the functionality (positioning) of Pin to Browser but with scrolling…so that it’s not fixed vertically and scrolls with the content?

#2

Isn’t vertically fixed exactly what ‘pin to browser’ is about?

#3

Pinning fixes an object’s position both vertically and horizontally, so I imagine that the question is about whether there’s a way to fix it in one direction and not the other. In this case, this might be something that clings to the right side of the browser while scrolling with the content.

There’s no box to check in the pin dialog to make this happen, but you can move pinned objects with interactions, and in v7 you can trigger an interaction when the user scrolls.

Jeff
pin one direction.rp (49.7 KB)

#4

Hi,

I need to accomplish something very similar to this. I need an object to slide to another portion of the screen once the user scrolls to a certain point on the page, and then remain fixed (pinned) to that spot. What would be the best way to do that?

#5

Hi gstern1994,

It sounds like you’re looking for something similar to a sticky header–is that correct? One of the more common approaches to creating that is having a duplicate of the object. That is, you’d have one that’s hidden and pinned in place and one that’s visible when the Page loads. Once the Page is scrolled down to a certain point and the two objects “overlap”, you’d toggle the visibility of the two objects. Check out this example:

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

#6

Another solution - without duplicating your panel with all its content and interactions.

  1. Name your panel e.g. StickyPanel
  2. Create another empty panel, name it e.g. StickyPanel_Anchor - for your comfort, with the same dimensions as your StickyPanel has and position it where you want it to be pinned.
  3. Pin StickyPanel_Anchor to browser as usual, properties -> Pin to browser.
  4. Add case with condition to define window scrolling, e.g. if "[[Window.scrollY]]" is greater than "360" (you can set the value you need)
  5. Add case Move StickyPanel to, then set X and Y values to the values of StickyPanel_Anchor with the function. Like that for Y:
    – click fx on the right to Y field
    – in Edit Value modal window, click Add Local Variable
    – in the second field, set LVAR1 = widget StickyPanel_Anchor
    – then, in the first field, type [[LVAR1.y]]

It worked for me, hope this helps. Sure, do not forget to define your panel position for Window.scrollY is less than [your value, 360 in my case].

#7

Holy cow, after yeeaaars of using Axure I finally found this solution and it works!! Thank you!