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

Question

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

0

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

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

Warz 28 нояб. 2013, в 04:50

Источник

Теги:

javascript

jquery

1 ответ

Ещё вопросы

Mark S · Accepted Answer · 2013-11-28T06-30-00.000Z

Не совсем уверен, что это именно то, что вы хотите сделать, поскольку я немного смущен вашим объяснением, но я подумал, что я делаю это: 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

Проверьте эту скрипку.

Это заставило меня начать на правильном пути.