Lock an element in place while scrolling using the Pin feature, that you can find in Scroll Trigger.
By enabling the "Pinned content" option, the selector of your choice becomes fixed on the screen between certain scroll positions.
After you enable the "Pinned content" option, the positioning box opens the "Selector" option, as "Element" is not available for the pin.
Choose the selector you want to pin. Usually, this would be a section and you would animate its nested elements in your timeline.
You can define only the "Start" selector, as the "End" would get inherited. However, you can use a different End trigger as well.
Note: The pinned content can be used without any animations inside.
How to change the position and length of the pinned content
Use the Scroller Start position to determine where the content becomes pinned. If you want a section to get pinned at the top edge of the screen, use 0% as a Start value.
Use the Scroller End position to change the length of the scrolling / duration of the pin.
Pinning works great together with the "Lock to scrollbar" option, as the timeline will get animated during the scroll of pinned content.
Note: It's not recommended to animate the same selector that is used as a pin trigger.
Pin spacing
Pin spacing will try to add a space in form of a margin or padding, so the content gets pushed down and meets the pinned content at its final destination.
You can also use a "No spacing" option, so the pinned content will overlay any other content during the time it's pinned, as it will not add any spacing to the layout.
Note: Padding will not work if the parent has a display: flex or position: absolute.