One of my pet peeves with Avada is the difficulty and inconsistency of trying to make columns sticky. In an earlier post, I wrote about some CSS that was put together for making columns sticky. CSS, but through trial and error, I’ve found that this doesn’t work all the time. Today on the Facebook group, somebody found an example of sticky that intrigued me because it had sections with different background colors and content. When I looked at the code, it changed my paradigm as it relates to Avada and opens the doors for a lot of creativity.
For a little background, the typical example is a two-column format (e.g.,1/3+2/3) with long content in the wider column and some content that needs to moe as the reader scrolls in the narrower column. In a normal HTML setup, you can add a div within the narrower column and assign a couple of CSS propertied — position:sticky and a top value. The sticky container will remain at the top of the viewport and appear to move the length of the narrow dive until it reaches the bottom of the parent. This setup is almost impossible in Avada with some very specific CSS.
Enter the new paradigm — the sticky container
Avada has the concept of sticky containers and has for a time, but typically these are for headers and navigation. But what about emulating the concept described above? No way … wait, why not? Using a sticky container for the narrow column (1/3 column aligned left) and allowing the rest of the content to move by. Having done it I can not think of why I didn’t do it before, but it is very easy to do and requires no custom CSS. The key is the z-index of the containers with the sticky container being higher than the content containers so that the content slide below. Rather than writing a lot more just check out the demo.
The Downside
If you are familiar with z-index, the downside should be fairly obvious. Since we are using a container that is set above the others and spans the width of the page, any time the content moves under the sticky container, interactive elements — hover, tabs, accordions, buttons, hyperlinks, etc. — are blocked.
Originally published on March 29, 2022
