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