[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

  • This topic has 9 replies, 2 voices, and was last updated 1 week ago by David.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #2304843
    Ian

    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;
    }

    #2304975
    David
    Staff
    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.

    #2306083
    Ian

    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!!

    #2306531
    David
    Staff
    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  ) {
        showElement.classList.add('show-me');
      } else {
        showElement.classList.remove('show-me');
      }
    }, 250);
    window.addEventListener('scroll', handleMouseMove);
    
    // Debounce function
    // https://www.joshwcomeau.com/snippets/javascript/debounce/
    const debounce = (callback, wait) => {
      let timeoutId = null;
      return (...args) => {
        window.clearTimeout(timeoutId);
        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.

    #2307105
    Ian

    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: https://generatepress.com/forums/topic/the-fastest-back-to-top-button-ever/

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

    Again, thank you so kindly David!

    Ian

    #2307580
    David
    Staff
    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.

    #2307601
    Ian

    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.

    #2307639
    David
    Staff
    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

    #2308127
    Ian

    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?

    #2308733
    David
    Staff
    Customer Support

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

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