On the page when scrolling to a specific block I turn on the animation:

$(window).on('load scroll', function() { if ($(this).scrollTop() >= '3450' && CountUpFlag == 0) { CountUp(); CountUpFlag = 1; } });

He did it on a small screen resolution, and the animation appeared as soon as the block got into view.
But if you look at the high resolution of the screen, the animation turns on when the block is almost scrolled.
How can I track the scrolling to a specific block without being tied to scrollTop() so that the animation at all resolutions is turned on immediately after the block appears in view?

    1 answer 1

    To determine if a block appears (at least 1 of its pixels, provided that the block enters the screen horizontally) on the screen when scrolling from top to bottom, it is enough to compare the sum of .scrollTop() and .height() for window with a vertical block offset relative to the top of the page .offset().top ):

     $(function() { var blockTop = $('.second').offset().top; var CountUpFlag = 0; var $window = $(window); $window.on('load scroll', function() { var top = $window.scrollTop(); var height = $window.height(); if (top + height >= blockTop && CountUpFlag == 0) { CountUp(); CountUpFlag = 1; } }); function CountUp() { $('#animation').show(); } }); 
     .first { height: 1500px; } .second { border: 1px solid; height: 200px; } #animation { position: fixed; display: none; } 
     <div id="animation">Time for animation</div> <div> <div class="first"></div> <div class="second"></div> <div class="first"></div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    When scrolling from the bottom up, you need to compare the sum of the vertical offset and the height of the block with the .scrollTop() for the window .

    Also, instead of writing your own code, you can use the appropriate plugin. For example, jQuery.appear .