スクロールで水平方向に要素を移動する

Question

ページがスクロールダウンすると、要素が画面外に水平方向にスクロールしようとしています。また、スクロールして元の位置に戻すこともできます。

スピードとリバーススクロールがうまく動作するのに問題があります。私は何ができるのですか？

$(document).ready(function() { 
 
    var $horizontal = $('.horizontal'); 
 
    var startPosition = $horizontal.position(); 
 
    var speed = 14; 
 
    var lastScrollTop = 0; 
 
    i=0 
 
    $(window).scroll(function() { 
 
      
 
     var st = $(this).scrollTop(); 
 
     if (st > lastScrollTop){ 
 
      // downscroll code 
 
      i++; 
 
     } else { 
 
      // upscroll code 
 
      i--; 
 
     } 
 
     lastScrollTop = st; 
 
     
 
     newPos = startPosition.left+(i*speed) 
 
     
 
     $horizontal.css({ 
 
      'left': newPos 
 
     }); 
 
    }); 
 
});

.container { 
 
    min-height: 50000px; 
 
    width: 100%; 
 
    overflow: hidden; 
 
} 
 
.horizontal { 
 
    position: fixed; 
 
    width: 50px; 
 
    background: url(http://www.pngpix.com/wp-content/uploads/2016/06/PNGPIX-COM-Renault-Megane-RS-Trophy-White-Car-PNG-Image.png) no-repeat center center; 
 
    background-size: cover; 
 
    width: 500px; 
 
    height: 200px; 
 
    left: 50%; 
 
    top: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="horizontal"> 
 
     
 
    </div> 
 
</div>

Answer 1

単に現在のscrollTopスプライトに

$(document).ready(function() { 
 
    var $horizontal = $('.horizontal'); 
 
    var startPosition = $horizontal.position().left; 
 
    var speed = 14; 
 
    $(window).scroll(function() { 
 
     var st = $(this).scrollTop(); 
 
     var newPos = (st * (speed/100)) + startPosition; 
 
     $horizontal.css({ 
 
      'left': newPos 
 
     }); 
 
    }); 
 
});

.container { 
 
    min-height: 50000px; 
 
    width: 100%; 
 
    overflow: hidden; 
 
} 
 
.horizontal { 
 
    position: fixed; 
 
    width: 50px; 
 
    background: url(http://www.pngpix.com/wp-content/uploads/2016/06/PNGPIX-COM-Renault-Megane-RS-Trophy-White-Car-PNG-Image.png) no-repeat center center; 
 
    background-size: cover; 
 
    width: 500px; 
 
    height: 200px; 
 
    left: 50%; 
 
    top: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="horizontal"> 
 
     
 
    </div> 
 
</div>

スピードを含めるように編集

を開始位置を追加