Make an element stick in place as you scroll the page.
You can find this feature already implemented in some of the prebuilt Act2 templates (e.g. Act2 Sticky Sidebar or Act2 Resources), so you can easily clone or copy/paste the entire section in other Act2 templates using our Coscopy extension.
You can achieve this with two required elements:
The container that defines the top and bottom boundaries within which your element should stick at the top, with this class:
It can be a Content Section or other element.
This is the actual element that will stick at the top while scrolling. Add this class to your module or group:
The Sticky Item should not be a divided group or module because that will break the layout. Obviously, it should be place inside the Sticky Parent.
By default, the element stops being sticky on mobile, when the columns stack (small breakpoint), but if your columns stack at the medium breakpoint, you may want to reset the Sticky Item by adding this class:
If your sticky item goes behind the header or if there is gap between, you can adjust your element's top position using the offset class:
offset-80. You can change 80 with the number of pixels you need. For example:
offset-97. That is usually the height of your sticky header, but feel free to choose whatever value you want.
Before applying the offset:
After applying the offset: