滚动时添加html元素

时间:2016-07-18 14:21:48

标签: javascript jquery html twitter-bootstrap

当我向下滚动鼠标时,我想在HTML代码中添加一个新的Bootstrap行。你能给我提供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>

1 个答案:

答案 0 :(得分:0)

向父div添加一行:

<强> HTML:

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

您是否希望它显示/滚动?

如果是这种情况,您可以在最后一行到达顶部时使用它:

jQuery:

google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
    return function() {
        infowindow.setContent(content);
        infowindow.open(map,marker);
        windows.push(infowindow)
        google.maps.event.addListener(map,'click', function(){ 
            infowindow.close();
        }); 
    };
})(marker,content,infowindow));