title: JavaScript : How get all post when scroll
body: <p>I've been trying to get a posts when scroll, I can do that by add ID to div and when click it, We get my posts.</p>
  
  <p>But i need when scroll, not when click to div.</p>
  
  <p>how can convert this.</p>
  
  <p>Suppose I have div and I want to fetch data and push data into that div. When the user scrolls within the div, the next set of data will be fetched and pushed into the div. How do I detect scroll bar position with jQuery? I don't want to use any plugin. I need jQuery code.</p>
  
  <pre><code>$window.scroll(function() {
          var pagiButton   = jQuery(this),
                  theBlock     = pagiButton.closest('.mag-box'),
                  theBlockID   = theBlock.get(0).id,
                  theSection   = theBlock.closest('.section-item'),
                  theTermID    = theBlock.attr('data-term'),
                  currentPage  = theBlock.attr('data-current'),
                  theBlockList = theBlock.find('.posts-list-container'),
                  theBlockDiv  = theBlock.find('.mag-box-container'),
                  options      = jQuery.extend( {}, window[ 'js_'+theBlockID.replace( 'tie-', 'tie_' ) ] ),
                  theListClass = 'posts-items',
                  isLoadMore   = false,
                  sectionWidth = 'single';
  
          if( currentPage &amp;&amp; options ){
              if( theTermID ){
                  if( options[ 'tags' ] ){
                      options[ 'tags' ] = theTermID;
                  }
                  else{
                      options[ 'id' ] = theTermID;
                  }
              }
  
              // Custom Block List Class
              if( options[ 'ajax_class' ] ){
                  theListClass = options[ 'ajax_class' ];
              }
  
              // Check if the Button Disabled
              if( pagiButton.hasClass( 'pagination-disabled' ) ){
                  return false;
              }
  
              // Check if the button type is Load More
              if( pagiButton.hasClass( 'load-more-button' ) ){
                  currentPage++;
                  isLoadMore = true;
              }
  
              // Next page button
              else if( pagiButton.hasClass( 'next-posts' ) ){
                  currentPage++;
                  theBlock.find( '.prev-posts' ).removeClass( 'pagination-disabled' );
              }
  
              // Prev page button
              else if( pagiButton.hasClass( 'prev-posts' ) ){
                  currentPage--;
                  theBlock.find( '.next-posts' ).removeClass( 'pagination-disabled' );
              }
  
              // Full Width Section
              if( theSection.hasClass( 'full-width' ) ){
                  sectionWidth = 'full';
              }
  
              // Ajax Call
              jQuery.ajax({
                  url : tie.ajaxurl,
                  type: 'post',
                  data: {
                      action : 'jannah_blocks_load_more',
                      block  : options,
                      page   : currentPage,
                      width  : sectionWidth
                  },
                  beforeSend: function(data){
  
                      // Load More button----------
                      if( isLoadMore ){
                          pagiButton.html( tie.ajax_loader );
                      }
                      // Other pagination Types
                      else{
                          var blockHeight = theBlockDiv.height();
                          theBlockDiv.append( tie.ajax_loader ).attr( 'style', 'min-height:' +blockHeight+ 'px' );
                          theBlockList.addClass('is-loading');
                      }
                  },
                  success: function( data ){
  
                      data = jQuery.parseJSON(data);
  
                      // Hide next posts button
                      if( data['hide_next'] ){
                          theBlock.find( '.next-posts').addClass( 'pagination-disabled' );
                          if( pagiButton.hasClass( 'show-more-button' ) || isLoadMore ){
                              pagiButton.html( data['button'] );
                          }
                      }
                      else if( isLoadMore ){
                          pagiButton.html( pagiButton.attr('data-text') );
                      }
  
                      // Hide Prev posts button
                      if( data[ 'hide_prev' ] ){
                          theBlock.find( '.prev-posts').addClass( 'pagination-disabled' );
                      }
  
                      // Posts code
                      data = data['code'];
  
                      // Load More button append the new items
                      if( isLoadMore ){
                          var content = ( '&lt;ul class="'+theListClass+' posts-list-container clearfix posts-items-loaded-ajax posts-items-'+currentPage+'"&gt;'+ data +'&lt;/ul&gt;' );
                          content = jQuery( content );
                          theBlockDiv.append( content );
                      }
  
                      // Other pagination Types
                      else{
                          var content = ( '&lt;ul class="'+theListClass+' posts-list-container posts-items-'+currentPage+'"&gt;'+ data +'&lt;/ul&gt;' );
                          content = jQuery( content );
                          theBlockDiv.html( content );
                      }
  
                      var theBlockList_li = theBlock.find( '.posts-items-'+currentPage );
  
                      // Animate the loaded items
                      theBlockList_li.find( 'li' ).hide().velocity('stop').velocity( 'transition.slideUpIn', {
                          stagger: 100,
                          duration: 500,
                          complete: function(){
                              tie_animate_element( theBlockList_li );
                              theBlockDiv.attr( 'style', '' );
                          }
                      });
                  }
              });
  
              // Change the next page number
              theBlock.attr( 'data-current', currentPage );
          }
          return false;
      });
  </code></pre>
  
  <p>to get all posts when scrolling </p>