title: Stop Mouse Scrolling at a variable ID or class NOT a pixel number
body: <p>I'm trying to stop scrolling at a variable instead of a pixel measurement.</p>
  
  <p>PINK is the top of my page YELLOW is nothing special, but RED is where I'm trying to stop the scrolling action using a variable to call an ID of my choice. The user should still be able to scroll up but never scroll beyond the red div.</p>
  
  <p>I've found some examples using pixels but my page changes height, so I'm trying to target <code>id</code> from divs with a variable instead of a pixel position.</p>
  
  <p>My broken Fiddle:
  <a href="http://jsfiddle.net/mikeloucas/d7o8exub/52/" rel="nofollow noreferrer">http://jsfiddle.net/mikeloucas/d7o8exub/52/</a></p>
  
  <p>P.S. I'm making an animation so I'm trying to keep the user on the red div until they click the "stop the scroll" button. (I got that part working elsewhere, not here, but it's pixel-based.)</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>$(document).ready(function() {
    var StartTop = $("#beginning").offset().top;
  
    /* $(document).scrollTop(StartTop); */
    var EndGame = $("#stopHere").height();
  
    $(document).on("scroll", function(e) {
      var windowScrollTop = $(window).scrollTop();
      if (windowScrollTop &lt; EndGame) {
        $(document).scrollTop(EndGame);
      } else if (windowScrollTop &gt; EndGame) {
        $(document).scrollTop(StartTop);
      }
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0;
  }
  
  #beginning {
    height: 200px;
    background: pink;
  }
  
  .genBox {
    height: 500px;
    background: yellow;
    width: 90%;
    margin: 0 auto;
  }
  
  #stopHere {
    height: 500px;
    background: red;
    width: 90%;
    margin: 0 auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="beginning"&gt;&lt;/div&gt;
  &lt;div class="genBox"&gt;&lt;/div&gt;
  &lt;div class="genBox"&gt;&lt;/div&gt;
  &lt;div id="stopHere"&gt;&lt;/div&gt;
  &lt;div class="genBox"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>