JSFiddle - React, Tailwind, and code Playground

by web designer

HTML

<header>
    <h1> Header </h1>
</header>
<section>
   <div class="items clearfix">
        <div class="item"><span>1</span></div>
         <div class="item"><span>2</span></div>
         <div class="item"><span>3</span></div>
         <div class="item"><span>4</span></div>
         <div class="item"><span>5</span></div>
         <div class="item"><span>6</span></div>
         <div class="item"><span>7</span></div>
         <div class="item"><span>8</span></div>
         <div class="item"><span>9</span></div>
         <div class="item"><span>10</span></div>
    </div>
   <div id="search-data">
    
        <div class="item"><span>1</span></div>
         <div class="item"><span>2</span></div>
         <div class="item"><span>3</span></div>
         <div class="item"><span>4</span></div>
         <div class="item"><span>5</span></div>

   </div>
</section>
<footer>
    <h1> Footer </h1>
</footer>

CSS

section{
    border:1px solid gold;
}
.items{
    height:auto;
    position:relative;
}
.item{
    width:200px;
    height:200px;
    float:left;
    line-height:200px;
    font-size:20pt;
    color:red;
    border:1px solid red;
    text-align:center;
    margin-right:10px;
}
.clearfix{
    clear:both;
}
.clearfix:after{
    display:table;
    content:"";
    clear:both;
}
header,footer{
    border:1px solid red;
}

JavaScript

var flg = true;
		$(window).scroll(function(e) {
			if ($(window).scrollTop() > $(document).height() - $(window).height() - 500 && flg) {
				flg = false;
				var cnt = $("#search-data").children().length - 1;
				$("#search-data").children().each(function(i) {
					$(this).clone().appendTo("div.items:not(.noChange)").css('display','none').fadeIn(2000);
					if (cnt == i) {
						flg = true;
					}
				});
			}
		});