スクロール時にhtml要素を追加する

Question

マウスを下にスクロールすると、新しいブートストラップ行がHTMLコードに追加されます。 JavaScriptコードを私に提供できますか？親のdivに行を追加するには

<div class="row"> 
    <div class="col-md-6 col-xs-6" > 
     <div> 
      <img src="img/picture1.jpg" alt="pic1"> 
     </div> 
     <div class="col-md-6 col-xs-6"> 
      <div> 
       <img src="img/temp/picture2.jpg" alt="pic2"> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

：

HTML：

<div id="parent"> 
    <div class="row"> 
     <div class="col-md-6 col-xs-6" > 
     <div> 
      <img src="img/picture1.jpg" alt="pic1"> 
     </div> 
     <div class="col-md-6 col-xs-6"> 
      <div> 
       <img src="img/temp/picture2.jpg" alt="pic2"> 
      </div> 
     </div> 
    </div> 
</div> 

のjQuery：

$(window).scroll(function() { 
    var numItems = $('.row').length; 
    if(numItems <= 2){ 
    $("#parent").append("<div class='row'>New Row</div>"); 
    } 
}); 

がある点がありますそれを表示/スクロールしたいですか？

それが最後の行はトップに到達したときにこれを使用することができそうである場合：

のjQuery：

$(window).scroll(function() { 
    var distance = $('.row:last').offset().top, $window = $(window); 
    if ($window.scrollTop() >= distance) { 
     var numItems = $('.row').length; 
     if(numItems <= 2){ 
      $("#parent").append("<div class='row'>New Row</div>"); 
     } 
    } 
});