Show Button only particular area while scrolling

Question

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.

score 2 · Accepted Answer · answered Sep 23 '21 at 05:32

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

Show Button only particular area while scrolling

1 Answers1