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

#leftgear {
    width: 8vw;
    max-width: 10%;
    height: auto;
}

#rightgear {
    width: 6vw;
    max-width: 10%;
    height: auto;
}
#leftgeara {
    width: 8vw;
    max-width: 10%;
    height: auto;
}

#rightgeara {
    width: 6vw;
    max-width: 10%;
    height: auto;
}
.elem {
  transition: top ease 3s;
  position: fixed;
  top: 180px;
  left: 50px;
  z-index: 999;
}
.elemg {
  transition: top ease 4s;
  position: fixed;
  top: 250px;
  left: 70px;
  z-index: 999;
}
.elemg-r {
  transition: top ease 6s;
  position: fixed;
  top: 240px;
  right: 70px;
  z-index: 999;
}
.elem-r {
  transition: top ease 4s;
  position: fixed;
  top: 160px;
  right: 70px;
  z-index: 999;
}

<script>;(function() {
    var throttle = function(type, name, obj) {
        var obj = obj || window;
        var running = false;
        var func = function() {
            if (running) { return; }
            running = true;
            requestAnimationFrame(function() {
                obj.dispatchEvent(new CustomEvent(name));
                running = false;
            });
        };
        obj.addEventListener(type, func);
    };
    throttle ("scroll", "optimizedScroll");
})();

var leftgear = document.getElementById("leftgear"),
rightgear = document.getElementById("rightgear");
    
// to use the script *without* anti-jank, set the event to "scroll" and remove the anonymous function.

window.addEventListener("optimizedScroll", function() {
    leftgear.style.transform = "rotate("+window.pageYOffset+"deg)";
    rightgear.style.transform = "rotate(-"+window.pageYOffset+"deg)";
});

var leftgeara = document.getElementById("leftgeara"),
rightgeara = document.getElementById("rightgeara");
    
// to use the script *without* anti-jank, set the event to "scroll" and remove the anonymous function.

window.addEventListener("optimizedScroll", function() {
    leftgeara.style.transform = "rotate("+window.pageYOffset+"deg)";
    rightgeara.style.transform = "rotate(-"+window.pageYOffset+"deg)";
});</script>

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