[Support request] Make Element Appear After Scroll

[lerschiboi]

Hi,

I’ve created a sticky “See Buying Options” Block Element that sticks to the bottom of my sales page: https://nutriciously.com/fall-winter-meal-plan/

Now, I’d like for this element to not be visible immediately but to fade in after the user has scrolled for a bit.

I tried this code from David over here: https://generatepress.com/forums/topic/bottom-sticky-works-now-want-to-load-on-scroll/ but it doesn’t seem to work for me. I targeted the page in question and chose wp_footer as the hook.

From what I understand, this should add the class “show-me” to my element after scrolling, which I can then use to make the element appear with some CSS. Is that correct and what do I have to do to make this work?

Thanks!

[David]

Hi there,

try this 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('#see-buying-options');
window.addEventListener('scroll', debounceX(checkScrollPosition));
</script> 

Set the let targetY = 600; // target scroll position to how far scrolling in pixels before it gets displayed

That script will toggle the is-visible class on the element.
So you can use some CSS like this:

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

As a fallback in case the user has disabled JS on their device.
Add this script to your site too:

<noscript>
    <style type="text/css">
    #see-buying-options.is-visible {
      opacity: 1 !important;
      pointer-events: auto !important;
    }
    </style>
</noscript>

It will make sure the button is visible in that scenario.

[lerschiboi]

Oh my goodness, that worked like a charm. Thanks David, you’re the best! 🙂

[David]

Glad to be of help!

[Author]

Posts