title: How to check whether my view page is not on top position using JavaScript events?
body: <p>How can I detect if a web page is not on top using a wheel event or scrollbar move?</p>
  <p>My code is partly working. The header is on top, the <code>startPosition</code> get a value which is bigger than 0 only after the second wheel scrolling, but it should be after the first wheel scrolling.
  Also, the wheel event is not firing when I scrolling the page using the scroll bar.</p>
  <p>So how can I detect if my page is not on top?</p>
  <p>For example:</p>
  <pre><code>window.addEventListener('wheel', (event)=&gt;{
     var target = document.querySelector('.main-header'); //Header which on top
     var targetPosition = target.getBoundingClientRect().top;
     var startPosition = window.pageYOffset;
     var distance = targetPosition - startPosition;
     console.log(event);
     if(startPosition&gt;0){
        upScrl.style.display = 'block';
     }
     else{
        upScrl.style.display = 'none';
     }  
  })
  </code></pre>