jquery - 滚动时移动图像 (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)  ;

}

我怎样才能实现流畅的动画？

Answer 1

如果我真的理解，你想在从顶部滚动到 800 像素时修复图像。我没有使用任何类型的动画，只是添加和删除类。我相信你的代码的问题是；您没有在 .scrolled 类上提供 display:fixed 属性。

查看链接 Here如果我误解了，请告诉我你到底想得到什么。