スクロール中に画像を移動する（Javascript）

Question

固定位置にスクロールしながら画像を移動したいのですが、800pxのようにスクロールしたときに画像を移動したいと思います。

ここで問題になるのは、画像を下にスクロールすると移動しますが、途中ではちらつきが発生し、上にスクロールすると問題が発生します。

Javascriptを：

if ($(window).width() >= 1024) { 

    $(window).scroll(function(){ 
     if ($(window).scrollTop() >= 800){ 
       $('.Pic_mv').each(function (i) { 
       $(this).toggleClass('scrolled'); 
      }); 
     }else if ($(window).scrollTop <= 800){ 
       $('.Pic_mv').each(function (i) { 
       $(this).toggleClass('.Pic_mv'); 
      }); 
     } 
    }) ; 
} 

CSS：

.Pic_mv { 
    border-radius: 100%; 
    margin-top: 30px; 
    margin-bottom: 25px; 

    transition: transform 300ms ease-in-out; 

} 
.Pic_mv.scrolled { 
    transform: translate(85%, 1300px) ; 

} 

どのように滑らかなアニメーションをachiveことができますか？

Answer 1

私が本当に理解していれば、上から上にスクロールして800pxに達すると画像を修正したいと思っています。私はどんな種類のアニメーションも使用せず、単にclassaddして削除しました。私が信じているあなたのコードの問題は、 .scrolledクラスにdisplay：fixedプロパティを指定していません。

Hereをチェックして、私が納得できないと思っているものを正確に教えてください。