滚动时移动圆弧中的元素

Question

所以，我在滚动时试图在我的容器中移动圆弧。

基本上，当我向下滚动时，我希望这个球在一个城市的图画上移动（圆圈/球是太阳）。

向下滚动应该让太阳穿过，而向上滚动则应该反过来。

它应该有轻微的弧度。

我一直在摆弄CSS变换几天没有运气，所以我希望有人可以帮助我。

我使用下面的代码在滚动时在同一页面上旋转一些齿轮，所以我认为它会有些相似，但不是旋转，而是移动并使太阳弧形起作用。

jQuery(function() {
    var rotation = 0, 
    scrollLoc = jQuery(document).scrollTop();
    jQuery(window).scroll(function() {
        var newLoc = jQuery(document).scrollTop();
        var diff = scrollLoc - newLoc;
        rotation += diff, scrollLoc = newLoc;
        var rotationStr = "rotate(" + rotation + "deg)";
        jQuery(".cog").css({
            "-webkit-transform": rotationStr,
            "-moz-transform": rotationStr,
            "transform": rotationStr
        });
    });
});

非常感谢任何帮助。

谢谢！