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:

1. Sticky Parent

The container that defines the top and bottom boundaries within which your element should stick at the top, with this class: sticky-parent

It can be a Content Section or other element.

Act2 Template Builder Sticky Parent Edit CSS

Act2 Template Builder Sticky Parent CSS Class

2. Sticky Item

This is the actual element that will stick at the top while scrolling. Add this class to your module or group: sticky-item

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.

Act2 Template Builder Sticky Item Edit CSS

Act2 Template Builder Sticky Item CSS Class


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: md-cancel

Act2 Template Builder Sticky Item MD Cancel CSS 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:

Act2 Sticky Item Behind Header Sample

After applying the offset:

Act2 Sticky Item Not Behind Header Sample

Using Act2.1 with the new Design Tools? Read this documentation.
Please read this before you buy! Close this alert