Avada has a lot of options related to sticky containers, but one that seems to be missing lets you hide the container on scroll down but have it appear on scroll up. The key setting is “Sticky Container Hide on Scroll,” which sounds remarkably intuitive, but there is a slight gotcha. The default setting of 0 is what tripped me up as I assumed 0=0px, which would theoretically have hidden the container on scroll down immediately. Other elements in Avada use -1 as the “all” option, and it would have made sense in this instance. Setting the container to 1 hides the container almost immediately on scroll down as desired. In most cases, the offset should probably be the height of the container, but not always.
One thing to remember is that two or more sticky containers on the same page interact with each other, and you may not get the results you intend. This is especially true when using a sticky header — this is because there is no offset setting for scrolling up, and your second container may be covered by your sticky header. The articles on this site are an example of this effect.
Originally published on Dec. 24, 2022
