Content of div getting deleted on scroll

Question

With jQuery I determine the nearest div (the most visible div). When the user doesn't scroll for a second, it scrolls that div into the center of the view. That works perfectly on codepen.io . That's a snippet:

 $(function($) { $(function() { $(window).on('scroll', function() { $('.the-divs div').html('').removeClass('most-visible').mostVisible().addClass('most-visible'); $(function(){ $(window).scroll(function() { clearTimeout($.data(this, 'scrollTimer')); $.data(this, 'scrollTimer', setTimeout(function() { var vpHeight = $(window).height(); var divHeight = $(".the-divs div").outerHeight(); var scrollOffset = (vpHeight - divHeight) / 2; $('html, body').animate({ scrollTop: $("div.most-visible").offset().top - scrollOffset }, 500); console.log("Not scrolled for 1s"); }, 1000)); }); }); }); }); function getMostVisible($elements) { var $element = $(), viewportHeight = $(window).height(), max = 0; $elements.each(function() { var visiblePx = getVisibleHeightPx($(this), viewportHeight); if (visiblePx > max) { max = visiblePx; $element = $(this); } }); return $element; } function getVisibleHeightPx($element, viewportHeight) { var rect = $element.get(0).getBoundingClientRect(), height = rect.bottom - rect.top, visible = { top: rect.top >= 0 && rect.top < viewportHeight, bottom: rect.bottom > 0 && rect.bottom < viewportHeight }, visiblePx = 0; if (visible.top && visible.bottom) { // Whole element is visible visiblePx = height; } else if (visible.top) { visiblePx = viewportHeight - rect.top; } else if (visible.bottom) { visiblePx = rect.bottom; } else if (height > viewportHeight && rect.top < 0) { var absTop = Math.abs(rect.top); if (absTop < height) { // Part of the element is visible visiblePx = height - absTop; } } return visiblePx; } $.fn.mostVisible = function() { return getMostVisible(this); } }); 

 .the-divs div { height:120px; width:300px; margin:10px auto; border:10px solid white; opacity:0.6; } div .most-visible { background-color:#16a085; transition:.5s ease-in-out; transition-delay:1s; } html, body { height: 100%; background: rgba(17,126,104,1); background: -moz-radial-gradient(center, ellipse cover, rgba(17,126,104,1) 0%, rgba(17,126,104,1) 25%, rgba(1,81,54,1) 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(17,126,104,1)), color-stop(25%, rgba(17,126,104,1)), color-stop(100%, rgba(1,81,54,1))); background: -webkit-radial-gradient(center, ellipse cover, rgba(17,126,104,1) 0%, rgba(17,126,104,1) 25%, rgba(1,81,54,1) 100%); background: -o-radial-gradient(center, ellipse cover, rgba(17,126,104,1) 0%, rgba(17,126,104,1) 25%, rgba(1,81,54,1) 100%); background: -ms-radial-gradient(center, ellipse cover, rgba(17,126,104,1) 0%, rgba(17,126,104,1) 25%, rgba(1,81,54,1) 100%); background: radial-gradient(ellipse at center, rgba(17,126,104,1) 0%, rgba(17,126,104,1) 25%, rgba(1,81,54,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#117e68', endColorstr='#015136', GradientType=1 ); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="the-divs"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> 

After creating that on codepen, I copied it onto my website. What happens there is, that as soon as I scroll, it deletes everything out of my divs. So the whole content in these divs ( .the-divs div on my snippet) just gets deleted. Does anyone know, what is causing this problem?
Thanks for your help in advance. (You can check out my website here )

Answer 1

using .html('') will set the html to being empty. You could use .html() to fetch the html content. Not sure why that would be needed though as the selector is kinda already doing that.

Answer 2

The reason behind this is you emptying your HTML Elements, with the following code:

$('.the-divs div').html('').removeClass('most-visible').mostVisible().add‌​Class('most-visible'‌​);

Where .html('') removes your content.

Thanks, and glad that it helped you. :)