Движение элементов при скролле страницы

css

.scroll-element {
  transition: top ease 3s;
  position: fixed;
  top: 180px;
  left: 50px;
  z-index: 999;
}

js

<script>var scrollTop = 0;
$(window).on("scroll", function(){
	var scrollNow = $(window).scrollTop(); // текущая прокрутка
	if (scrollNow > scrollTop) {
		console.log('прокрутили вниз');
    $('.scroll-element').css( "top", "60%" );
	} else {
		console.log('прокрутили вверх');
    $('.scroll-element').css( "top", "30%" );
	} 
	scrollTop = scrollNow;
})</script>

подключить jquery в теме или function.php

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>