CODEWITHSUNDEEP
javascript
Simon Maye
Simon Maye

Reputation: 3

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

Upvotes: 0

Views: 95

Answers (1)

hambos22
hambos22

Reputation: 168

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

Upvotes: 1

Related Questions