在滚动上顺利移动div

Question

当我向下滚动时，我想继续移动一个png（或其包含的div），因为scrollTop从一个值变为另一个值。基本上，我想通过＆＃34;转换来垂直移动：＆＃34;翻译＆＃34;来自scrollTop的-600％是1165到550％，scrollTop是1700.

这是我到目前为止所拥有的：

HTML

 <div id="droplet">
     <img src="img/drop06.png">
 </div>

CSS

#droplet{
    z-index: 2;
    transform: translate(76.5%,-600%);
}

JS

$( document ).ready(function() {

   $(window).scroll(function() {
    var scrollTop = $(this).scrollTop();

    var difference = (11.5*(scrollTop-1165)/(1700 - 1165))-600;

    // (1) $('#droplet').css('transform: translate(76.5%',+difference+'%');

    // (2) $('#droplet').css({transform, 'translate(76.5%,'+ difference +'%)'});

    // (3) $('#droplet').css({transform: 'translate(76.5%,' + difference +'%)'});

    // (4) $('#droplet').css('transform','translate(76.5%,'+difference+'%)');

    });
});

（1）到（4）是我的尝试，没有做任何事情。

我做错了什么？

非常感谢任何帮助。