translateY doesn't work when added from jQuery .css() function

Question

translateY doesn't work when added from jQuery.css() function,

Scale and Opacity work fine, but translateY doesn't!

$(function () {
  $(window).scroll(function () {
      bds = $("body").scrollTop();
      myScale = 1.2 - (bds / 1000);
      myOPacity = 1 - (bds / 100);
      myTransform = bds;

      $(".slogan").css({
          "transform": "translateY(" + myTransform +"px) scale( " + myScale + ")",
          opacity: myOPacity
      });

  });

Answer 1

It seems that you should only change bds = $("body").scrollTop(); as this:

<script>
    $(document).ready(function () {
        $(window).scroll(function () {
            bds = $(window).scrollTop();
            myScale = 1.2 - (bds / 1000);
            myOPacity = 1 - (bds / 100);
            myTransform = bds;

            $(".slogan").css({
                "transform": "translateY(" + myTransform + "px) scale( " + myScale + ")",
                opacity: myOPacity

            });
        });
    });
</script>