The task is to add a class with a delay to the elements that are in the utility of the parent block. If you just scroll down without stopping. That looks supposedly good. But if it stops and scrolls again, the script begins to be reworked from the first element. How to make it continue to work out, and did not start to work out again? Sample code below:

$('.viewport').scroll( function(){ $('.element').each( function(i, e){ var bottom_of_object = $(this).position().top + $(this).outerHeight(), bottom_of_window = $('.viewport').scrollTop() + $('.viewport').height(); if( bottom_of_window > bottom_of_object){ setTimeout(function() { $(e).css('opacity', '1'); }, i * 1000); } }); }); 
 * { box-sizing: border-box } body { background: #95B8D1; font-family: "Pt Sans", sans-serif; } .wrapper { max-width: 600px; margin: 50px auto; min-height: 100vh } .viewport { height: 400px; overflow-x: hidden; overflow-y: auto; color: #747474; background: #fff; font-size: 18px; padding: 20px; } .element { width: 45%; float: left; margin: 5px; opacity: 0; transition: 500ms; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <div class="viewport"> <div class="element">Lorem ipsum dolor sit amet, id ius aperiri reformidans mediocritatem. Ei cum quando vocibus, id numquam labores veritus usu.</div> <div class="element">Lorem ipsum dolor sit amet, id ius aperiri reformidans mediocritatem. Ei cum quando vocibus, id numquam labores veritus usu.</div> <div class="element">Lorem ipsum dolor sit amet, id ius aperiri reformidans mediocritatem. Ei cum quando vocibus, id numquam labores veritus usu.</div> <div class="element">Lorem ipsum dolor sit amet, id ius aperiri reformidans mediocritatem. Ei cum quando vocibus, id numquam labores veritus usu.</div> <div class="element">Lorem ipsum dolor sit amet, id ius aperiri reformidans mediocritatem. Ei cum quando vocibus, id numquam labores veritus usu.</div> <div class="element">Lorem ipsum dolor sit amet, id ius aperiri reformidans mediocritatem. Ei cum quando vocibus, id numquam labores veritus usu.</div> <div class="element">Lorem ipsum dolor sit amet, id ius aperiri reformidans mediocritatem. Ei cum quando vocibus, id numquam labores veritus usu.</div> <div class="element">Lorem ipsum dolor sit amet, id ius aperiri reformidans mediocritatem. Ei cum quando vocibus, id numquam labores veritus usu.</div> <div class="element">Lorem ipsum dolor sit amet, id ius aperiri reformidans mediocritatem. Ei cum quando vocibus, id numquam labores veritus usu.</div> <div class="element">Lorem ipsum dolor sit amet, id ius aperiri reformidans mediocritatem. Ei cum quando vocibus, id numquam labores veritus usu.</div> <div class="element">Lorem ipsum dolor sit amet, id ius aperiri reformidans mediocritatem. Ei cum quando vocibus, id numquam labores veritus usu.</div> <div class="element">Lorem ipsum dolor sit amet, id ius aperiri reformidans mediocritatem. Ei cum quando vocibus, id numquam labores veritus usu.</div> <div class="element">Lorem ipsum dolor sit amet, id ius aperiri reformidans mediocritatem. Ei cum quando vocibus, id numquam labores veritus usu.</div> <div class="element">Lorem ipsum dolor sit amet, id ius aperiri reformidans mediocritatem. Ei cum quando vocibus, id numquam labores veritus usu.</div> <div class="element">Lorem ipsum dolor sit amet, id ius aperiri reformidans mediocritatem. Ei cum quando vocibus, id numquam labores veritus usu.</div> <div class="element">Lorem ipsum dolor sit amet, id ius aperiri reformidans mediocritatem. Ei cum quando vocibus, id numquam labores veritus usu.</div> <div class="element">Lorem ipsum dolor sit amet, id ius aperiri reformidans mediocritatem. Ei cum quando vocibus, id numquam labores veritus usu.</div> </div> </div>

  • Scroll - the scroll event runs multiple times. Add the second line console.log('0'); and look in the console. Your function is executed dozens of times. - Jean-Claude
  • Yes, I understand that .. How can this "be improved"? - NeedHate
  • you do not need to run the each method on the scroll , which iterates through all the elements. I guess at the scroll event it is necessary to check the visibility of the elements, it is visible - not to touch, not visible - to show. - Jean-Claude

0