How to fix JavaScript?

Question

css

I use this solution to animate elements:

$(window).scroll(function() {	
$('#example-14').each(function(){
var imagePos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow+600) {
$('.device-arrow14').addClass("slideUp");
}
});	
});

#example-14{
text-align: center;
}
#example-14 .device-arrow14{
width: 100%;
visibility: hidden;
margin: 0 auto;
}
#example-14{
text-align: center;
}
.slideUp{
  animation-name: slideUp;
  -webkit-animation-name: slideUp;	

  animation-duration: 1s;	
  -webkit-animation-duration: 1s;

  animation-timing-function: ease;	
  -webkit-animation-timing-function: ease;

  visibility: visible !important;			
}

@keyframes slideUp {
  0% {
    transform: translateY(100%);
  }
  50%{
    transform: translateY(-8%);
  }
  65%{
    transform: translateY(4%);
  }
  80%{
    transform: translateY(-4%);
  }
  95%{
    transform: translateY(2%);
  }			
  100% {
    transform: translateY(0%);
  }	
}

@-webkit-keyframes slideUp {
  0% {
    -webkit-transform: translateY(100%);
  }
  50%{
    -webkit-transform: translateY(-8%);
  }
  65%{
    -webkit-transform: translateY(4%);
  }
  80%{
    -webkit-transform: translateY(-4%);
  }
  95%{
    -webkit-transform: translateY(2%);
  }			
  100% {
    -webkit-transform: translateY(0%);
  }	
}

<section id="example-4">
<div class="device-arrow4">
Анимируемый элемент
</div>
</section>

The animation occurs when the page scrolls down by 600 pixels, before that the animated element is hidden. It is necessary to make the script work immediately after loading the page, and not at the moment of scrolling, but it was also hidden before the animation began (he gave an example of 1 animation, there will be 4 in total, each of the subsequent ones is played with a delay).

Answer 1

$( document ).ready(function() {
    здесь код, который сработает когда страница загружена:
$('.device-arrow14').addClass("slideUp");
});

For the question I formulated, the solution is this. The solution was suggested by Maxim Timofeev .

Answer 2

Well, here is this piece

$('#example-14').each(function(){
var imagePos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow+600) {
$('.device-arrow14').addClass("slideUp");
}
});

put in a separate function, for example like this:

var topOfWindow = window.scrollY;

function myScroll() {
$('#example-14').each(function(){
var imagePos = $(this).offset().top;
topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow+600) {
$('.device-arrow14').addClass("slideUp");
}
});
}

then call her

myScroll();

$(window).scroll(function() {
myScroll();
});

To find out the current position without window.scroll() , use the global window object , if I'm not mistaken, there should be a property scrollY , that is, window.scrollY will return your offset which you have when you open the browser, or if you scrolled the page to this and stop at position 0, it will return that number.
Simply put, your code starts running after the window.scroll event , not after the page has loaded.