Is there a good way to place a floating button on the bottom of the website that will show after scrolling a certain pixels of the page, and that will disappear again when scrolled back towards the top?
I have achieved placing a floating button on the bottom of the page but can’t figure out how to show and hide depending on the scroll position.
(blue Botton on the screenshot)
I’d appriciate it, if someone could point me to the right direction.
I use this for headers usually you can implement for button to
Thank you for the advice!
I did check out the link.
I’m not so proficient with custom codes, could you tell me which parameter of this code I have to change to what, and where to place this code?
add this code to your page as < script > code
red selecting class
orange the class will be added/removed after the scroll
green pixel number for scroll for adding the orange classes or removing depending on the how many pixel scrolled
orange class will be added or removed depending on the scroll so you can control the class CSS whatever you want
and you can make red class display:none and the orange class display:flex or block
so it shows on scroll.
use chatgpt to understand more.
document.addEventListener('DOMContentLoaded', function() {
var getthecontainer = document.querySelector('.header-top');
window.addEventListener('scroll', function() {
if (window.pageYOffset >= 180) {
getthecontainer.classList.add('header-scrolled');
} else {
getthecontainer.classList.remove('header-scrolled');
}
});
if (window.pageYOffset >= 180) {
getthecontainer.classList.add('header-scrolled');
} else {
getthecontainer.classList.remove('header-scrolled');
}
});
Thank you very much!
This worked!!
I used chatGPT as you suggested and got further description of each element.
Really appreciate the time you spent explaining the code.
Cheers