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。

滚动时附加div元素

1 个答案: