title: Check when text is at specific position
body: <p>I have text inside a div that scrolls down using the <strong>jquery marquee</strong> plugin. It sort of acts as an introduction to a project I'm working on. I want to reveal that project to the user as soon as the text in the div is completely done scrolling.</p>
  
  <p>How can I know when the text is completely gone from the screen? How do I get its position? </p>
  
  <p>PS: Before you think you know how it should work. Can you try it out yourself using my code in the snippet? </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-js lang-js prettyprint-override"><code>/*INTRO*/
      $('#intro').marquee({
          duration: 15000,
          gap: 5,
          delayBeforeStart: 0,
          direction: 'down',
          pauseOnHover: true,
          duplicated: false
      });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#intro{
   font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
   position: absolute; 
   opacity: 0.5;
   font-size: 140%;
   text-align: center;
   height: 200%;
   top: -20%;
      left: 7%;
   padding-left:15%;
   padding-right:15%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src='//cdn.jsdelivr.net/jquery.marquee/1.3.9/jquery.marquee.min.js'&gt;&lt;/script&gt;
    &lt;div id="intro"&gt;&lt;p&gt;&lt;b&gt;&lt;i&gt;THIS IS MY SCROLLING INTRO THAT'S SUPPOSED TO SHOW THE NEXT THING ONLY WHEN THE TEXT IS COMPLETELY DONE SCROLLING&lt;/i&gt;&lt;/p&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here's a <a href="https://jsfiddle.net/4pum96ek/" rel="nofollow">fiddle</a> of it as well.</p>