title: Append div element when scrolling
body: <p>I am trying to append a <code>&lt;div&gt;</code> element to my container when the current window scroll height is below or above the current page the user is scrolled to. In the markup below:</p>
  
  <pre><code>&lt;div id="st-container" class="st-container"&gt;
        &lt;div class=" fullscreen-container animated fadeInDown" id="fullscreen-container"&gt;
              &lt;div class=" custom_inner offset2" id="fullscreen"&gt;
                &lt;div class="pageHolder" id="3"&gt;
                 &lt;/div&gt;
                 &lt;div class="pageHolder" id="4"&gt;
                 &lt;/div&gt;
              &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>The <code>&lt;div&gt;</code> elements i am working with have the class <code>pageHolder</code>, in a <code>$(window).scroll()</code> function, i would like to get the height of the current page holder and append on top or bottom, depending on how the user is scrolling, a new div element if the element doesn't exist, the element doesn't exist if I can't find it by the <code>id</code>. I have tried this so far but unsure where to go from:</p>
  
  <pre><code> $(window).scroll(function () {
       var scrollTop = $(this).scrollTop();
       $('.pageHolder').each(function(){
           var position = $(this).position();
       })
   }
  </code></pre>