Question

0

45

Views

Deal with ScrollY changing value

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

7 months ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-06-30T07:27:49.717Z

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