滾動時追加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>元素在$(window).scroll()函數中具有class pageHolder類，我想獲取當前頁面持有者的高度並將其附加在頂部或底部，具體取決於用戶的方式正在滾動，如果該元素不存在，則為新的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

檢查這個小提琴 。