[Resolved] Sticky button – Javascript for ‘make sticky button visible on scroll’

Unfortunately you can’t just mix and match codes 🙂
Can you remove any Javascript and CSS related to making this button sticky. And then let me know.

Can you clear any caches as i still see the scripts and CSS on that page.

OK. Lets get the JS working first.

1. Create your Hook element, and set the Hook to wp_footer

2. Add this Code to the Hook:

<script>
// debounce scroll eventListener
function debounceX(func, wait = 10, immediate = true) {
  let timeout;
  return function() {
    let context = this, args = arguments;
    let later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    let callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
};
// check position 
function checkScrollPosition() {
  let windowY = window.scrollY;
  let targetY = 600; // target scroll position
  if (windowY < targetY) {
    watchedEL.classList.remove('is-visible');
  } else {
    watchedEL.classList.add('is-visible');
  }
  scrollPos = windowY;
}
//  add listener
const watchedEL = document.querySelector('#sticky-button');
window.addEventListener('scroll', debounceX(checkScrollPosition));
</script> 

3. Set the Display Rules to the Entire site or wherever you want it displayed.

4. Publish that,

Then let me know

Can you move the #sticky-button ID to the Container Block that the buttons site inside of. It currently has a hide-on-mobile class attached to it for reference.

Can you purge those caches 🙂 Or maybe disable them whilst you’re developing

Now add this CSS:

#sticky-button {
    position: fixed;
    left: 0;
    transform: rotate(90deg);
    transform-origin: bottom left;
}
#sticky-button .gb-button {
    opacity: 0;
    transform: translatey(100%); 
    transition: all 0.4s ease-in-out;
}
#sticky-button.is-visible .gb-button {
    transform: translatey(0); 
    opacity: 1;
}