Deal with ScrollY changing value

Question

I'm new to web development and javascript so please don't judge this question.

I have a footer that I want to show only when my website users scroll to the bottom.

I have done this in javascript and it works fine but I am wondering if there is a way to get in javascript the scrollY value for the bottom of different screen sizes. For example, the scrollY is not the same on mobile and laptops.

const footerUp = document.querySelector('.footer');

/*Show footer only when scroll to the bottom*/
window.addEventListener('scroll', () => {
  if (window.scrollY >=600) {
    footerUp.style.bottom = 0;
  } else{
    footerUp.style.bottom = '-22rem';
  }
});

Answer 1

You should check window.innerHeight and window.pageYOffset if they're greater than document's offsetHeight. This will show the footer while at the bottom

const footerUp = document.querySelector('.footer');

/*Show footer only when scroll to the bottom*/
window.addEventListener('scroll', () => {
  if (window.innerHeight + window.pageYOffset >= document.body.offsetHeight) { // <--- here
    footerUp.style.bottom = 0;
  } else{
    footerUp.style.bottom = '-22rem';
  }
});