Moving element horizontally on scroll

Trying to scroll an element horizontally right off the screen as the page scrolls down. I’d also like to be able to scroll back up and have the element be in the original position.

I’m having trouble getting the speed and reverse scroll to work just right. Any ideas what I can do?

$(document).ready(function () {
    var $horizontal = $('.horizontal');
    var startPosition = $horizontal.position();
    var speed = 14;
    var lastScrollTop = 0;
    $(window).scroll(function () {
        var st = $(this).scrollTop();
         if (st > lastScrollTop){
             // downscroll code
         } else {
            // upscroll code
         lastScrollTop = st;
        newPos = startPosition.left+(i*speed)
            'left': newPos
.container {
  min-height: 50000px;
  width: 100%;
  overflow: hidden;
.horizontal {
    position: fixed;
    width: 50px;
    background: url( no-repeat center center;
    background-size: cover;
    width: 500px;
    height: 200px;
    left: 50%;
    top: 50px;
<script src=""></script>
<div class="container">
   <div class="horizontal">

Simply add the start position to current scrollTop

Edited to include speed