UPDATE: As of Avada 7.8, there is now a sticky column feature that works fairly well, but this example can be used if you need sticky where it currently fails to work.
Part of the problem is the creation of divs within divs when adding fairly simple content. Fortunately, Noel Smyth in the Facebook group has figured out how to implement this with a little bit of CSS. Adding a sticky class is fairly straightforward, but in order to get the behavior to work correctly, you need to add a class to the parent div #boxed-wrapper and set the overflow to visible as the default is hidden. This step enables all the sub-containers to act normally. I put together a sticky columns demo page showing how this can work.
The basics:
- Add a sticky class
- Make sure to have a top or bottom offset distance
- Add the class to the boxed-wrapper ID
.sticky {
position:sticky;
}
.top-space--lg{
top:5rem;
}
#boxed-wrapper {
overflow: visible;
}Originally published on Feb. 12, 2022
