滚动时固定为绝对位置使我的img跳转

Question

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

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

这是 Jquery 代码（类“.scrolled”只是说“位置：绝对”）

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

---

更新 下面，我将添加我的 HTML 和 CSS 代码。对不起，伙计们，我是一个初学者，我没想到让他们回答我的问题很重要。

HTML

<div class="grid"> <div class="row"><div class="col-6"><img src="https://www.illibraio.it/wp-content/uploads/2017/09/francesco-carofiglio-1.jpg" alt="FotoPortfolio"></div></div>


        <div class="row">
     <p class="page">
      Hi everybody!<br>
      My name is Francesco Cagnola<br> and I'm a communication designer.<br>
   Recently, I've graduated at Politecnico di Milano with a degree in Communication Design.
      I'm experienced in videomaking and photography but I can do beautiful graphics too.
        I'm based in Milan but I'm spending a period in London to breath this vibrant city!
         <br><br>
         "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
    </p> 
    </div> </div>  

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;
}

.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;
}

Answer 1

当您移除滚动的类时，您可以添加另一个名为“动画”的类。

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

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

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

这将是 jQuery：

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

但滚动必须在 CSS 中有这个：

.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');
      }
});

还有 CSS：

img {
  position: absolute;
}

Answer 2

然后在 CSS 上为没有上、左、右、下的图像设置一个相对位置，就可以了。 真不知道你是不是把你的HTML和CSS放了