There is a block with a diagram inside which there is a number. I found the script "animateNumber.js" which animates this number from 0 to the number I need. But the script works immediately. How to make it work only when I scroll to this block?

Here is the script:

$('.lines-1') .prop('number', 10) .animateNumber({ number: 90 }, 3700 );

    1 answer 1

    I think the sample code will be enough:

     $(document).ready(function(){ $(document).scroll(function(e){ var coord = $(".showMenu").offset(); if ( ($(window).height()+$(window).scrollTop() >= coord.top) && ($(window).scrollTop() - (coord.top + 25) < 0) ){ $('#i_menu').css('display', 'block'); } else { $('#i_menu').css('display', 'none') } }) }) 
     .showMenu{ margin-top:800px; margin-bottom: 800px; border: 1px solid red; } #i_menu{ display:none; background-color:yellow; position:fixed; top:0; width:100%; height:25px; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Крути вниз, пацанчик! <br /> <div class="showMenu">Отслеживаемый блок</div> <div id="i_menu">Я - результат совершаемого действа!!!</div>

    Here we track the scroll. And if the screen height + scrolling offset is greater than the height value at which the monitored block is located (margin-top: 800px;) or vice versa, the block goes up too high, then we do something. In this case, just show another block. In your case, this will start the timer.