Добавить элемент div при прокрутке

Question

Я пытаюсь добавить элемент <div> в мой контейнер, когда текущая высота прокрутки окна находится ниже или выше текущей страницы, на которую прокручивается пользователь. В приведенной ниже разметке:

<div id="st-container" class="st-container"> 
     <div class=" fullscreen-container animated fadeInDown" id="fullscreen-container"> 
      <div class=" custom_inner offset2" id="fullscreen"> 
       <div class="pageHolder" id="3"> 
       </div> 
       <div class="pageHolder" id="4"> 
       </div> 
      </div> 
     </div> 
    </div> 

В <div> элементах я работаю имеют класс pageHolder, в $(window).scroll() функции, я хотел бы получить высоту текущего владельца страницы и добавить сверху или снизу, в зависимости от как прокручивается пользователь, новый элемент div, если элемент не существует, элемент не существует, если я не могу найти его по id. Я попытался это до сих пор, но не знаете, куда идти:

$(window).scroll(function() { 
    var scrollTop = $(this).scrollTop(); 
    $('.pageHolder').each(function(){ 
     var position = $(this).position(); 
    }) 
} 

Answer 1

Не совсем уверен, что это именно то, что вы ищете, чтобы сделать, как я немного запутался с объяснением, но я думал, что я дам ему выстрелили : D

$(window).scroll(function(){ 
    var scrollTop = $(this).scrollTop(); 

    $('.pageHolder').each(function(){ 
     var $this = $(this), 
      position = $this.position(), 
      id = parseInt($this.attr('id')), 
      $div = $('<div>'); 

     if(scrollTop > position.top){ 
      /* 
      If window scrollTop is greater that its top position 
      check if the immediate succeeding sibling exist 
      */ 
      if(!$this.next('.pageHolder').length){ 
       /* 
       If its next sibling does not exist 
       create a new sibling <div> by inserting it after this 'pageHolder' 
       */ 
       $div.addClass('pageHolder').attr('id',id+1).text('pageHolder id'+(id+1)); 
       $this.after($div) 
      }   
     }else{ 
      if(!$this.prev('.pageHolder').length){ 
       $div.addClass('pageHolder').attr('id',id-1).text('pageHolder id'+(id-1)); 
       $this.before($div) 
      } 
     } 
    }); 

    /* 
    Make a continouos scroll when scrolling up 
    Without this set of code, prepending a new <div> is not possible 
    */ 
    if(scrollTop == 0){ 
     $(window).scrollTop(50); 
    } 

}).scrollTop(50); //Make the window start with a scrollTop of 50, this is essential for the continouos scrolling up 

Проверьте это fiddle.