스크롤 할 때 html 요소 추가

Question

마우스를 아래로 스크롤 할 때 HTML 코드에 새 부트 스트랩 행을 추가하려고합니다. JavaScript 코드를 제게 제공 할 수 있습니까?

<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

부모 DIV에 행을 추가하려면 :

는 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>"); 
     } 
    } 
});