Javascript 位置固定为绝对滚动使我的img跳跃

我希望看到一个背景图像（不是全屏），以前定位为“固定”，慢慢地移向网页的顶部，然后像绝对定位一样消失，但只有在一定数量的像素之后。 我使用“addClass”事件将定位从固定更改为绝对

达到所需的像素量时，图像会受到新类的影响，但它不会开始向上平滑移动，而是跳到始终由绝对位置定义的位置。相反，我喜欢从它所在的位置开始移动

这是Jquery代码（类“.scrolled”只表示“position:absolute”）

---

然后在CSS上放置一个没有上、左、右、下的图像的相对位置，就可以了。

---

不知道在删除滚动类时是否没有将HTML和CSS放入滚动类，可以添加另一个名为“动画”的类

“动画”将在CSS中包含以下内容：

.animation {
    position: absolute;
    animation-name: godown;
    animation-duration: ...s;
    animation-fill-mode: forwards;
}

@keyframes godown {
    0% {
        top: 350px;
    }
    100% {
        top: 0px;
    }

.scrolled {
    position: absolute;
}

这将是jQuery：

if (pixels > 350) { 
    $("img").addClass("scrolled");
    $("img").removeClass("animation");
} else {
    $("img").removeClass("scrolled");
    $("img").addClass("animation");
}

但是scrolled必须在CSS中包含以下内容：

.animation {
    position: absolute;
    animation-name: godown;
    animation-duration: ...s;
    animation-fill-mode: forwards;
}

@keyframes godown {
    0% {
        top: 350px;
    }
    100% {
        top: 0px;
    }

.scrolled {
    position: absolute;
}

我现在在手机上，所以我的测试是有限的，但它实际上应该可以工作

更新： 这是CSS：

.grid {
  width: 100%;
}

.row {
  margin-bottom: 1%;
  display: flex;
  justify-content: flex-start;
}

.col-6 {
  width: 50%;
}

body {
  background-color: #000000;
  color:black;
 margin: 0px
}
img {    
  position: fixed;
  top:15%;
  justify-content: flex-end;
  margin-left: auto;
  width: 50%;
  right:5%;
  z-index: 0;
}
.scrolled{
  position:absolute;
  animation-name: godown;
  animation-duration: .5s;
  animation-fill-mode: forwards;
}

.page {
  font-family: 'Roboto', sans-serif;
  font-size: 36px;
  font-weight: 400;
  color: white;
  position: absolute;
  top: 10%;
  padding: 14px 16px;
  width: 60%;
  float: left;
}

@keyframes godown {
0% {
    top: 350px;
}
100% {
    top: 0px;
}

这是JS:

$(window).scroll(function(){
  $(document).on("scroll", function () {
  var pixels = $(document).scrollTop()
  if (pixels > 350) {
    $("img").addClass("scrolled");
  } else {
    $("img").removeClass("scrolled");
    }
  });
});

它工作正常，当你们从顶部滚动350px时，img平稳地移动到绝对位置

第二次更新：

您可以在jQuery中“模拟”

position:fixed

。就这样,

$(window).scroll(function () {
var pixels = $(document).scrollTop()
  if (pixels < 350) {
    $('img').css(
      'top', $(this).scrollTop() + "px"); 
  }  else {
        $('img').css(
          'top' : '0px',
          'transition' : '.5s');
      }
});

---

您可能想发布您的CSSkinly发布您的html和CShello，谢谢您的回答。我很抱歉以前没有添加HTML和CSS：我只是一个初学者，我并不奇怪它们会成为寻求帮助的必要工具。如果你还想帮助我，那就太好了：）嗨，凯文，谢谢你的回答。我刚刚添加了HTML和CSS。如果你还想帮助我，那就太好了：）你好，森蒂索，非常感谢你回答我。我尝试添加您建议的代码，但我认为添加与关键帧相关的部分似乎有冲突。在我添加这个特定的部分后，页面只显示img，而不在其位置，文本消失！我已经更新了我的问题，也许它可以帮助我：）再次感谢如果我理解正确，你基本上只移动了那张图片？？或者其他一些东西？？在开头，图像被固定为第一段的背景。所以文本在它上面流动。一旦提到img的段落结束，我希望图像能从顶部滑出，并带有I SenTisso！抱歉，我没有收到更新通知！多谢各位！它起作用了！：DSo它能做你想要的吗？？很好：顺便说一句。如果它有效，你能把我的答案标记为解决方案吗？？谢谢：）

$(window).scroll(function () {
var pixels = $(document).scrollTop()
  if (pixels < 350) {
    $('img').css(
      'top', $(this).scrollTop() + "px"); 
  }  else {
        $('img').css(
          'top' : '0px',
          'transition' : '.5s');
      }
});

img {
  position: absolute;
}