I am trying to make a side button that extends an image and appears only when the user scrolls a certain no. of pixels. I have managed to do this before with another button but on desktop and on mobile, but this one doesn’t show after 20px, it shows up after scrolling for many times.

           let sidebtn = document.getElementById("side-arrow");

                  // When the user scrolls down 20px from the top of the document, show the button
            window.onscroll = function() {scrollFunction()};
            function scrollFunction() {
            if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                sidebtn.style.display = "block";
            } else {
                sidebtn.style.display = "none";
            }
            } 

I want to make it so that the button shows after 20px. Is there a better way to do this to get the same result.