Black Friday sale! Get up to 25% off GP Premium! Learn more ➝

[Resolved] Bottom Sticky Works, now want to load on scroll

Home Forums Support [Resolved] Bottom Sticky Works, now want to load on scroll

Home Forums Support Bottom Sticky Works, now want to load on scroll

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
  • #2304843

    I have used this css to stick a GB Container to the bottom of the browser. Is there a way to tweak it to make the container show up only after scrolling?

    There is a button inside, maybe I need to run more css to target container and button to make this work? Trying to do this with just css, no js. I believe there might work with an opacity rule. Any tips?

    .container1 {
    position: sticky;
    bottom: 20px;

    Customer Support

    Hi there,

    theres no way to do it with just CSS. It requires Javascript to listen for the scroll event, and then do something like apply your CSS Class.

    I may have a JS snippet somewhere if you need that, or look for the Animate on Scroll plugin in WP repository.


    Thanks for chiming in David. I have indeed tested screen visibility + opacity by themselves but could not get this to work. Thank you for letting me know it has to be JS based.

    If you don’t mind, I would love to take a look at the JS snippet! Thank you so much!!

    Customer Support

    So give this a try:

    // Get the ID of your Element
    var showElement = document.querySelector('#your-html-element-ID');
    // Set the scroll offset from top - value in px
    var offsetY = 200;
    const handleMouseMove = debounce((ev) => {
      var winY = window.scrollY;
      // Add or Remove the <code>show-me</code> class from the element
      if ( winY >= offsetY  ) {
      } else {
    }, 250);
    window.addEventListener('scroll', handleMouseMove);
    // Debounce function
    const debounce = (callback, wait) => {
      let timeoutId = null;
      return (...args) => {
        timeoutId = window.setTimeout(() => {
          callback.apply(null, args);
        }, wait);

    You can wrap it in some <script> </script> tags and use a Hook element to add it the wp_footer hook and set the displays for where the script needs to run.

    Change the #your-html-element-ID to match the ID ( Advanced > HTML Anchor if using a Block ).
    I added a debounce code which simply means wait a while after the event of scrolling before doing stuff, it may help performance.
    The do stuff is to add or remove the show-me class on your selected element.


    Wow David, amazing stuff! As always actually! Let me test this on another site.

    Just a heads up, this conversation was me trying to figure this one out:

    Would appreciate any feedback you may have to make that button even better!

    Again, thank you so kindly David!


    Customer Support

    Nice πŸ™‚
    Try this for some free smooth scrolling:

    html {
        scroll-behavior: smooth;

    It will apply to any jump links on the page however, so if you’re using the GP Smooth Scroll option in the Customizer > General then DONT use this as there will be a conflict.


    Very nice David. Added it and it looks great! Keeping it.

    Mentioned you at the end of the post and in the css section. Hope that’s ok!

    btw, what do you think about the hook placement wp_footer? Odd? Not sure where might be a better location.

    Customer Support

    Well thank you πŸ™‚

    Its not an issue using the wp_footer hook as its within the body of the document so it doesn’t have an issue with their being HTML inside. But that hook is generally reserved for adding codes.

    As your post talks specifically about GP – you can use the after_footer hook, thats a GP Theme hook, that will put in the same place. To make sure its last in the HTML you can increase the hook Priority to 999


    Hey David,

    Thank you so much for your insight and expertise here! Just made the adjustment to after_footer

    Also noticed in a few instances when the Button is scrolled over some other GB Blocks with background images, it is not clickable. I adjusted the parent container’s Outer z-index to 999 and that resolved it. Doing this makes sense?

    Customer Support

    Yeah, a z-index property may be required to ensure it stays in front of any other content. So thats good πŸ™‚


    Update: Got it working with help from this post –

    I’m attempting the same thing and followed the steps above to no avail. I think I need some hand-holding. Can I get some troubleshooting help?

    Customer Support

    Hi Aaron – glad to hear you found a solution.

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.