title: Finding where element meets top of scrollable div
body: <p>I have a scrollable <code>div</code> container fits multiple &quot;pages&quot; (or <code>div</code>'s) inside of it's container.</p>
  <p>My goal is to, at any given moment, figure out where inside my <strong>red</strong> container does it reach the top of my scrollable container. So it can be a constant on scroll event, or a button that triggers this <em>task</em>.</p>
  <p>So for example. If I have a absolute div element inside one of my red boxes at <code>top:50px</code>. And if I scroll to where that div element reaches the top of my scrollable container. The trigger should say that I am at <code>50px</code> of my red container.</p>
  <p>I'm having a hard time grasping how to accomplish this but I've tried things like:</p>
  <pre><code>$(&quot;#pageContent&quot;).scroll(function(e) {
      console.log($(this).scrollTop());   
  });
  </code></pre>
  <p>But it doesn't take into account the separate pages and I don't believe it it completely accurate depending on the scale. Any guidance or help would be greatly appreciated.</p>
  <h2>Here is my code and a <a href="http://jsfiddle.net/rL4Ly3yy/" rel="nofollow noreferrer">jsfiddle</a> to better support my question.</h2>
  <p><strong>Note:</strong> If necessary, I use scrollspy in my project so I could target which red container needs to be checked.</p>
  <p><strong>HTML</strong></p>
  <pre><code>&lt;div id=&quot;pageContent&quot; class=&quot;slide&quot; style=&quot;background-color: rgb(241, 242, 247); height: 465px;&quot;&gt;
      &lt;div id=&quot;formBox&quot; style=&quot;height: 9248.627450980393px;&quot;&gt;
          &lt;div class=&quot;trimSpace&quot; style=&quot;width: 1408px; height: 9248.627450980393px;&quot;&gt;
              &lt;div id=&quot;formScale&quot; style=&quot;width: 816px; -webkit-transform: scale(1.7254901960784315); display: block;&quot;&gt;
                  &lt;form action=&quot;#&quot; id=&quot;XaoQjmc0L51z_form&quot; autocomplete=&quot;off&quot;&gt;
                      &lt;div class=&quot;formContainer&quot; style=&quot;width:816px;height:1056px&quot; id=&quot;xzOwqphM4GGR_1&quot;&gt;
                          &lt;div class=&quot;formContent&quot;&gt;
                              &lt;div class=&quot;formBackground&quot;&gt;
                                  &lt;div style=&quot;position:absolute;top:50px;left:100px;width:450px;height:25px;background-color:#fff;color:#000;&quot;&gt;When this reaches the top, the &quot;trigger&quot; should say 50px&quot;&lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;formContainer&quot; style=&quot;width:816px;height:1056px&quot; id=&quot;xzOwqphM4GGR_2&quot;&gt;
                          &lt;div class=&quot;formContent&quot;&gt;
                              &lt;div class=&quot;formBackground&quot;&gt;&lt;div style=&quot;position:absolute;top:50px;left:100px;width:450px;height:25px;background-color:#fff;color:#000;&quot;&gt;This should still say 50px&lt;/div&gt;&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><strong>CSS</strong></p>
  <pre><code>#pageContent {
      position:relative;
      padding-bottom:20px;
      background-color:#fff;
      z-index:2;
      overflow:auto;
      -webkit-overflow-scrolling: touch;
      -webkit-transform: translate(0, 0);
      -moz-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
      transform: translate(0, 0);
  }
  #formBox {
      display: block;
      position: relative;
      height: 100%;
      padding: 15px;
  }
  .trimSpace {
      display: block;
      position: relative;
      margin: 0 auto;
      padding: 0;
      height: 100%;
      overflow: hidden;
  }
  #formScale::after {
      display: block;
      content:'';
      padding-bottom:5px;
  }
  #formScale {
      position:relative;
      width:816px;
      margin:0;
      -webkit-transform-origin: 0 0;
      -moz-transform-origin: 0 0;
      transform-origin: 0 0;
      -ms-transform-origin: 0 0;
  }
  .formContainer {
      position:relative;
      margin : 0 auto 15px auto;
      padding:0;
  }
  .formContent {
      position:absolute;
      width:100%;
      height:100%;
  }
  .formBackground {
      width:100%;
      height:100%;
      background-color:red;
  }
  </code></pre>
  <p><strong>JS</strong></p>
  <pre><code>var PAGEWIDTH = 816;
  
  $(window).resize(function (e) {
      zoomProject();
      resize();
  });
  
  function resize() {
      $(&quot;#pageContent&quot;).css('height', window.innerHeight - 45 + 'px');
  }
  
  function zoomProject() {
      var maxWidth = $(&quot;#formBox&quot;).width(),
          percent = maxWidth / PAGEWIDTH;
      $(&quot;#formScale&quot;).css({
          'transform': 'scale(' + percent + ')',
          '-moz-transform': 'scale(' + percent + ')',
          '-webkit-transform': 'scale(' + percent + ')',
          '-ms-transform': 'scale(' + percent + ')'
      });
      $(&quot;.trimSpace&quot;).css('width', (PAGEWIDTH * percent) + 'px');
      $(&quot;#formBox, .trimSpace&quot;).css('height', ($(&quot;#formScale&quot;).height() * percent) + 'px');
  }
  
  zoomProject();
  resize();
  </code></pre>
  <hr />
  <h2><strong>EDIT</strong>:</h2>
  <p>I don't think I am conveying a good job at relaying what I want to accomplish.</p>
  <p>At the moment there are two <code>.formContainer</code>'s. When I scroll <code>#pageContainer</code>, the <code>.formContainer</code> divs move up through <code>#pageContainer</code>.</p>
  <p>So what I want to accomplish is, when a user clicks the &quot;ME&quot; button or <code>#click</code> (as shown in the fiddle below), I'd like to know where in that particular <code>.formContainer</code>, is it touching the top of <code>#pageContainer</code>.</p>
  <p>I do use scroll spy in my real world application so I know which <code>.formContainer</code> is closest to the top. So if you just want to target one <code>.formContainer</code>, that is fine.</p>
  <p>I used these white div elements as an example. If I am scrolling <code>#pageContainer</code>, and that white div element is at the top of screen as I am scrolling and I click on &quot;ME&quot;, the on click trigger should alert to me that <code>.formContainer</code> is touching the top of <code>#pageContainer</code> at 50px from the top. If, the the red container is just touching the top of <code>#pageContainer</code>, it should say it is 0px from the top.</p>
  <p>I hope that helps clear up some misconception.</p>
  <p>Here is an <a href="http://jsfiddle.net/rL4Ly3yy/1/" rel="nofollow noreferrer">updated jsfiddle</a> that shows the kind of action that I want to happen.</p>