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.

Controls the scroll distance before the container is hidden while scrolling downwards. Set to 0 to keep visible as you scroll down. In pixels.

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

MacBook Pro showing programming languageNew Section: Code Snippets
Analytics Alternative: Cabin.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

RELATED ARTICLES

  • Read Using Font Awesome Sharp Icons

    Using Font Awesome Sharp Icons

    Here is a quick tip on using the latest icons from Font Awesome.

    April 1, 2023

  • Read Using Avada Elements in the Block Editor

    Using Avada elements in the block editor to optimize tips and tricks.

    October 29, 2022

  • Read Remove dots under a required form label

    Ever been working on an Avada form, set the field to required, and then you start seeing spots? No, you're not seeing things.

    September 5, 2022

  • Read Remove RankMath Annoyance

    Remove RankMath Annoyance

    If you are a user of RankMath, I suspect you have encountered the annoying notification when you delete an item that is prompting you to set a redirect after you have deleted content. In and of itself, it is actually quite useful, but it doesn’t go away if you close […]

    September 3, 2022

  • Read List of Links

    List of Links

    I am working on a new project and recently discovered some great CSS features --- text-underline-position and text-decoration-thickness.

    August 21, 2022

  • Read Border between columns

    Border between columns

    Since Avada currently does not have border settings for small and medium screens, this was our workaround

    August 16, 2022