[Support request] Sticky button visible when is sticking (fade in after scroll)

Hi there,

second option should work fine here.

1. edit your <button> HTML and give it an ID eg. sticky-menu

2. Add the script:

<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-menu');
window.addEventListener('scroll', debounceX(checkScrollPosition));
</script> 

Note this line: const watchedEL = document.querySelector('#sticky-menu'); is where we declare the buttons ID.
Edit this line: let targetY = 600; to set how far in pixels a user has to scroll before the is-visible class is toggleed on the button#sticky-menu element.

3, the CSS needs to change to match your elements ID:

#sticky-menu {
    opacity: 0; 
    pointer-events: none;
    transition: all 0.3s ease-in;
}
#sticky-menu.is-visible {
    opacity: 1;
    pointer-events: auto;
}

You’re welcome – glad to be of help!