How To Use Sticky Columns In Avada

Position Sticky is an option in the Column Element, that makes a Column sticky within a Container. You can use this feature in many ways.

In a simple example here on this page, we have a 1/6 column to the left of this 5/6 column, and the 1/6 column is set to sticky. Its only content is an Icon Element, but as you scroll down the page, you will see the icon stays where it is as the top of the container continues off the page.

When you get to the top of the next container, it then leaves the screen with the container it is in. The Column is, of course, only sticky within the container it is in. There is no limitation as to the content of the Column. It could be a menu, a title, a shopping cart, social media links, site metadata; in fact anything you can think of.

To make a column sticky, you just need to edit the Column and on the Extras tab, set the Position Sticky Option to on. For another example of Sticky Columns in use, watch the video below.

With this optionm you can choose at which screen sizes the container should be sticky. By default, all screen sizes are selected, but if you don’t want the column to be sticky on small screens for example, you could turn that off here, by deselecting small screens.

This controls how far the top of the column is offset from the top of the viewport when sticky. You can use either a unit of measurement or a CSS selector. In the example on this page, the offset is set to 150px.

Using a CSS Selector offsets the sticky column by the element’s height with the matching CSS Selector. For example, let’s say we have a sticky header that is 200px in height. To that container, we could assign the CSS Class of .sticky-header, and then in the Sticky Column Offset option, we could add the same .sticky-header. This way, as one scrolls and the column starts to be sticky, it is offset from the top of the viewport by the 200px height of the sticky header.