Floating button that shows and hide depending on scroll position

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.

1 Like

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');
  }
});
2 Likes

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