Need to show Button between 370px to 410px while scrolling in the Page.
useEffect(() => {
document.addEventListener('scroll', () => {
try {
if ((document.body.scrollTop < 410 || document.documentElement.scrollTop < 410) && (document.body.scrollTop > 370 || document.documentElement.scrollTop > 370)) {
setBtn(true);
} else {
setBtn(false);
}
} catch (e) {
console.error(e);
}
});
}, [Btn]);
{Btn ? <button>Submit</button> : null}
Suggest me, how to solve this because this above code is not working.
The problem with your validation is that using an || operator using two ways of getting the scrollTop is causing your issues, because in chrome document.body.scrollTop returns 0, and that guarantees that the first part of your condition will always be true. So you need to separate for each way of getting the scrollTop
In other words, your if should have this instead:
((document.body.scrollTop < 410 && document.body.scrollTop > 370) || (document.documentElement.scrollTop < 410 && document.documentElement.scrollTop > 370))
Also here's a better explanation of the scrollTop problem