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

Question

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

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

这是 Jquery 代码（class “.scrolled” 只是说 "position:absolute"）

   <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上给没有上下左右的图片加上一个相对位置就可以了。真的不知道你是否不把你的 HTML 和 CSS

Answer 2

当您删除 class 滚动时，您可以添加另一个 class，例如 'animation'。

而 'animation' 将在 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");
    }
  });
});

它工作正常，当你从顶部滚动 350 像素时，img 顺利地定位到绝对位置。

第二次更新：

您可以在 jQuery 中 "simulate" 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;
}

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

position fixed to absolute on scroll make my img jump

javascript

jquery

css

css-position

positioning