Good content sticks. Literally. That's why we've made some great enhancements to sticky positions in Pro. Elements can now be sticky both relative to the screen border and in 'free position'.
Never used sticky? No problem. The definition of stickiness is in the word: elements that are "sticky" wil remain in the same spot when scrolling. The scrolling part is important, otherwise we would never notice that an element is sticky. A good example of this behaviour is a navigation bar that remains at the top of your screen.
Sticky positioning in the Pro editor has always worked in combination with a relative "anchor". Upon setting your element's position to sticky, you ought to pick a reference point which can be either of your four screen borders or the middle of the canvas. That way, the element would always remain in view for the duration of the scene.
However, if you wanted to have an element become sticky only for a small distance of the scene or page, there was no way of doing so. Your element was either sticky (always in view) or it wasn't. A workaround for this scenario was to use keyframe animations, though this wasn't an ideal solution as an animation is not the same as sticky positioning - although the result may look similar.
Let's take a look at what's been changed.
Previously, you would find 'sticky' as a position within the positioning options dropdown menu. In that same menu, you'll find that it is now available as an additional setting to the other positions. That means that you're choosing either "free position" or "screen border" and can toggle the sticky option for either.
Here's how it works depending on your chosen position:
As mentioned before, creating elements that would only be sticky for a small distance wasn't an option and often a keyframe animation would be used as a workaround. Fortunately with the 'free position' option in combination with sticky, you can position an element halfway through your scene and configure the distance (in pixels) that it needs to travel. You'll find a line is drawn on the canvas to visualise the distance. Additionally, you can add margin to add space between the element and the border of the screen (if you have opted for 'top' or 'bottom').
Although they may look similar in result, sticky positioning and keyframe animations are different.
So when should you use one in favour of the other? Let's put it simply:
It's recommended to opt for sticky where you can, as keyframe animations may be heavier on performance and will slow down your pages.