JSFiddle - React, Tailwind, and code Playground

by Sebastian Kay

HTML

<div id="1" class="div1">
dsfsdf
</div>
<div id="fotos">
<h4>fotos</h4>
<div id="fotos-brautstyling"></div>
</div>

CSS

html,
body {
  margin: 0;
  padding: 0;
}

.div1 {
  height: 800px;
  width: 100%;
  background-color: #ff00ff;
}

JavaScript

$.fn.isInViewport = function() {
		    var elementTop = $(this).offset().top;
		    var elementBottom = elementTop + $(this).outerHeight();
		
		    var viewportTop = $(window).scrollTop();
		    var viewportBottom = viewportTop + $(window).height();
		
		    return elementBottom > viewportTop && elementTop < viewportBottom;
		};
		  
		          // When the user scrolls down 20px from the top of the document, show the button
					
					$(document).on('resize scroll load', function() {

						
if ($('#fotos').isInViewport() && !$('#fotos').hasClass("loaded")) {
$('#fotos').addClass("loaded")
$('#fotos-brautstyling').html('<div class="element-item 3" data-category="3"><img src="themes/haarliebe-01/assets/images/fotos/bs-01.jpg" class="img-thumbnail" alt="BRAUTSTYLING 1" /></div>'
+ '<div class="element-item 3" data-category="3"><img src="themes/haarliebe-01/assets/images/fotos/bs-03.jpg" class="img-thumbnail" alt="BRAUTSTYLING 2" /></div>'
+ '<div class="element-item 3" data-category="3"><img src="themes/haarliebe-01/assets/images/fotos/bs-04.jpg" class="img-thumbnail" alt="BRAUTSTYLING 3" /></div>'
+ '<div class="element-item 3" data-category="3"><img src="themes/haarliebe-01/assets/images/fotos/bs-07.jpg" class="img-thumbnail" alt="BRAUTSTYLING 4" /></div>'
+ '<div class="element-item 3" data-category="3"><img src="themes/haarliebe-01/assets/images/fotos/bs-08.jpg" class="img-thumbnail" alt="BRAUTSTYLING 5" /></div>'
+ '<div class="element-item 3" data-category="3"><img src="themes/haarliebe-01/assets/images/fotos/ff-09.jpg" class="img-thumbnail" alt="BRAUTSTYLING 6" /></div>'
+ '<div class="element-item 3" data-category="3"><img src="themes/haarliebe-01/assets/images/fotos/ff-04.jpg" class="img-thumbnail" alt="BRAUTSTYLING 7" /></div>'
+ '<div class="element-item 3" data-category="3"><img src="themes/haarliebe-01/assets/images/fotos/ff-05.jpg" class="img-thumbnail" alt="BRAUTSTYLING 8" /></div>'
+ '<div class="element-item 3" data-category="3"><img...