Sorry, the InVision Help Center does not support Internet Explorer. Please download Microsoft Edge or another modern browser.


InVision ambassador ambassador
Jacob Mariano Jacob Mariano Edited
closed thread

Studio - Sticky header nav on scroll

I'm wondering if there is a way to create an animation in Studio that allows an element (header nav in this case) to stick to the top of the screen on scroll, when its original location is NOT at the top of the screen. Similar to what Apple has going on: https://www.apple.com/macbook-pro/macos/

When you scroll, the top header scrolls off the page, but the sub-header becomes sticky at top. Any help making this work in Studio would be great. Thanks. 

6

comments

sort by

official comment
Shaina Torgerson
Shaina Torgerson, InVision Employee , ambassador

Hi Shape,

As you can imagine, we have received an overwhelming amount of feature requests for Studio. The Studio Product Managers prioritize issues based on the scope and impact of the issue.

While I have no ETA to offer, I am happy to include your voice for this functionality so that our team can factor that into our product strategy. I will open a ticket on your behalf to track your vote. Please look for a message confirming your vote soon.

If anybody else would like to add their vote for this feature, please fill out a ticket with Support here detailing the feature you are looking for.

Have a wonderful day,

Shaina


Shaina Torgerson
InVision ambassador Shaina Torgerson, InVision Employee , ambassador Edited

Hi Jacob,

If I'm understanding correctly, you are looking to add a fixed element to your design in Studio. These are the pinning options which should allow pinning to left, top, right, bottom, vertically or horizontally:



These simply fix the position of an element itself, however. At this time, this is not equivalent to Sketches fixed height/weight behavior (resizing constraints). You can use percent-based width or height to have elements adjust size as your artboard changes in size. You can also using the pinning options at the lower-right of the screenshot below to pin an element to the top, right, bottom, and/or left or to pin it in place horizontally or vertically on the artboard.



The pin icon is for fixed positioning, so if you applied the pin to a header layer/group, for example, when you scroll, the content of your artboard would scroll under your fixed header. The lock icon locks the aspect ratio. 

Please let me know if this allows you to accomplish the behavior you are looking for. I noticed that in the link to Apple's site that you provided that the instructions above may not exactly allow this. After some testing, please let me know if you are still unable to achieve the behavior you are looking for.

Thanks,

Shaina

0

Jacob Mariano
InVision ambassador Jacob Mariano , ambassador

Thanks Shaina,

The functionality for pinning items to the page and locking location makes sense. But it sounds like what I'm looking for is not currently possible with Studio. I'm hoping to be able to create an animation that shows a page element that starts somewhere on the page (other than the top) and then sticks to the top on scroll. Let me know if there's a way to get this functionality on a roadmap.

Best,

Jacob

1

Shaina Torgerson
InVision ambassador Shaina Torgerson, InVision Employee , ambassador

Hi Jacob,

Thanks for taking a look at pinning and providing some more context here. It does sound as if this is a feature not yet available in Studio. I would like to open a ticket on your behalf with our Support team so that they can dive deeper into this use case. Please look for a message from them soon.

Thanks,

Shaina

0

José Juan Navalón Gallego
InVision ambassador José Juan Navalón Gallego , ambassador

Hi!

Jacob's suggestion is very valuable and I'd like to vote for it as well. An option to create an object that scrolls as normal UNTIL it reaches a limit (e.g.: the top of the browser window) and then it STICKS to it... so it doesn't disappear when scrolling carries on.

There's also a nice example of this behaviour here: https://www.salzburg-airport.com/en/trip-planning-luggage/travel-planning/travel-preparation/

(Look at the 2nd level navigation bar "Travel Documents     Maps     Arrival & Parking     Tax Refund". It fixes ONLY when it reaches the top of the window. It's like a "conditional fixed element"... it only fixes when its x-axis point reaches 0).

Thanks,

José Juan.

1

Beth Vanderkolk
InVision ambassador Beth Vanderkolk, InVision Employee , ambassador

Hey José Juan!

Thanks for taking a minute to add your vote and the additional details you provided. I'll have Support reach out to you so that they can track your interest in this improvement.

Beth

1

Shape Helsinki
InVision ambassador Shape Helsinki , ambassador

Is this something that is already on some release plan? I upvote this suggestion since it would be applicable in multiple cases.

1