title: JavaScript scrollTop not working on mobile
body: <p>I am trying to develop an application, but I ran into a problem. You know real applications like Apple's Shortcuts or Cydia, when you scroll they all have an effect with the titles at the top, I have two examples here: <a href="https://streamable.com/j5yu5" rel="noreferrer">https://streamable.com/j5yu5</a></p>
  
  <p>I am trying to do the same, it does work on the computers, but not on my mobile phone (iPhone 7+, running iOS 12.1.1, Jailbroken, tried fullscreen safari, webclip)</p>
  
  <p>here is my code right now:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
   &lt;meta charset="UTF-8"&gt;
   &lt;title&gt;Adam Izgin&lt;/title&gt;
   &lt;script src="http://koda.nu/arkivet/94004581"&gt;&lt;/script&gt;
   &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"&gt;&lt;/script&gt;
   &lt;style&gt;
  
    * {
     font-family: Chalkboard SE;
    }
  
    html, body {
     background: #fff;
     scroll-behavior: smooth;
    }
  
    body {
     height: 150vh;
    }
    
    #header {
     width: 100vw;
     height: 50px;
     background: #fff;
     position: fixed;
     top: 0;
     left: 0;
    }
  
    #title {
     font-size: 20px;
     font-weight: 900;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     opacity: 0;
     transition: opacity 250ms ease-in-out;
    }
  
    .title {
     margin: 40px 20px;
     font-weight: 900;
     font-size: 30px;
     opacity: 1;
    }
  
    #top {
     position: absolute;
     top: 0;
     left: 0;
    }
  
   &lt;/style&gt;
   &lt;script&gt;
    
    $(document).ready(function() {
     get('html').end(function() {
      if (html.scrollTop &gt; 30) {
       alert('Hello, World!');
      };
     });
    });
  
   &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
   &lt;div id="top"&gt;&lt;/div&gt;
  
   &lt;div id="header"&gt;
    &lt;h1 id="title"&gt;text&lt;/h1&gt;
   &lt;/div&gt;
  
     &lt;h1 class="title" id="title1"&gt;text&lt;/h1&gt;
   
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>open the snippet in fullscreen, and inspect as a mobile and drag with the mouse instead of scrolling. That works on my computer, but not on my phone. Any ideas? thanks in advance.</p>
  
  <p>ps: the <strong>get</strong>-function is the same as the jQuery's <strong>$</strong>, and the <strong>end</strong>-function is the same as on<strong>touchend</strong></p>