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

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

[David]

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.

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

[David]

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.

[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

[David]

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.

[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.

[David]

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

[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?

[David]

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

[Aaron]

Update: Got it working with help from this post – https://generatepress.com/forums/topic/make-element-appear-after-scroll/

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?

[David]

Hi Aaron – glad to hear you found a solution.

[Author]

Posts