Archived topic
Sticky button visible when is sticking (fade in after scroll)
3 replies · Started by Piotr on February 11, 2023
Hi,
I'm working on my personal website. I'd like to make a sticky menu button with difference blending mode (mix-blend-mode: difference), but I couldn't achieve deisred effect with GeneratePress standard sticky menu option. Alternatively, I created a custom sticky button, which almost do the job. The problem is I don't know how to make the button fade in after the user has scrolled for a bit (like in standard sticky menu option). Is there any solution to do the trick?
I tried this code from David:
https://generatepress.com/forums/topic/bottom-sticky-works-now-want-to-load-on-scroll/
...and this:
https://generatepress.com/forums/topic/make-element-appear-after-scroll/
Unfortunately, both solutions didn't work for me...
Many thanks,
Piotr
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;
}Hi David,
now it works like a charm. Your support is always the best. I don't know how to thank you!
Sincerely,
Piotr
You're welcome - glad to be of help!