When the balls reach the black line, you need to withdraw the alert . The if ($('.el').position() > 300) {alert('dhfsiu')} did not work.

Code example:

 $(function() { function getRandomInt(min, max) { return Math.round(Math.random() * (max - min + 1)) + min; } var e = $('.el'); for (var i = 0; i < 5; i++) { e.clone().insertAfter(e); } top = $('.el').scrollTop() var score = 0 $('.el').click(function() { $('.el').each(function() { $(this).css({ 'transform': 'translateY(-600px)', 'transition': getRandomInt(5000, 10000) + 'ms' }) }) $(this).css({ 'opacity': 0, 'transition': 'none' }) score++ $('.score span').text(score) }) if ($('.el').position() < 300) { alert('dhfsiu') } }); 
 .el { background-color: red; width: 50px; height: 50px; border-radius: 50%; display: inline-block; margin-left: 5px; } .display { display: none } .army { position: absolute; bottom: 0; } hr { height: 5px; background-color: black; border: none; margin-top: 100px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="score"> <h2>your score: <span></span></h2> </div> <hr> <div class="army"> <div class="el"></div> </div>

  • Transformation through CSS is not so interactive and does not allow tracking the positions of elements. In my opinion, it is necessary to make the movement of elements with the help of its function and it will be possible to track the position in it. - coder675

0