Auto Hide after scroll

Ask the Community Customization
1

I am wondering if I could get this button to auto hide after scrolling 30%

2 Likes
3

Hi there, @Rev_Devan :waving_hand:

Please let me discuss it with the dev team. I’ll get back to you once I have any news :slightly_smiling_face:

1 Like
4

Yep, it’s possible to implement this customization. One question: would you like the widget to appear again if the scroll is back to 30% position?

1 Like
5

Yes that would be great, and if flexible with the percentage so I can play with what’s best.

2 Likes
6

Got you!

Your request is with our devs now. I’ll update you once the solution is ready :wink:

1 Like
7

I see it working but I guess I was hoping it would fade out slowly as the scroll continue to be completely gone by 50% and start fading at 30%.

2 Likes
8

Okay! I’ll ask the devs if it’s feasible and will get back to you later :slightly_smiling_face:

2 Likes
9

Hi there, @Rev_Devan :waving_hand:

We’ve adjusted the script in the Custom JS field on the Settings tab and now the widget gradually fades out when scrolling:

const MIN_THRESHOLD = 0.3;
const MAX_THRESHOLD = 0.5;
const WIDGET_SELECTOR = ".eapps-accessibility-05a2ed38-2a13-452f-bcc8-b1db9113f17e-custom-css-root";

const widgetСontainer = document.querySelector(WIDGET_SELECTOR);

const getScrollPosition = () => {
  const scrollTop = window.scrollY || document.documentElement.scrollTop;
  const docHeight = document.documentElement.scrollHeight;
  const winHeight = window.innerHeight;
  
  const trackLength = docHeight - winHeight;
  
  return Math.floor((scrollTop / trackLength) * 100);
};

const changeWidgetVisibility = () => {
  const scrollPercentage = getScrollPosition() / 100;
  const isPastMaxThreshold = scrollPercentage >= MAX_THRESHOLD;
  const isInMinThreshold = scrollPercentage <= MIN_THRESHOLD;
  
  if (isPastMaxThreshold || isInMinThreshold) {
    
    Object.assign(widgetСontainer.style, {
      opacity: isPastMaxThreshold ? 0 : 1,
      display: isPastMaxThreshold ? "none" : "block"
    });
    
    return;
  }
  
  const fadeRange = MAX_THRESHOLD - MIN_THRESHOLD;
  const currentFade = scrollPercentage - MIN_THRESHOLD;
  const opacity = 1 - (currentFade / fadeRange);
  
  Object.assign(widgetСontainer.style, {
    opacity,
    display: "block"
  });
};

changeWidgetVisibility();
document.addEventListener("scroll", changeWidgetVisibility);

Please check your website and let me know if you like how the script works :slightly_smiling_face:

1 Like