Question

我希望看到一张背景图片（不是全屏），之前定位为＆＃34;固定＆＃34;，慢慢移向网页的顶部，然后像绝对定位一样消失，但只能在一定数量的像素之后。我使用了＆＃34; addClass＆＃34;事件将定位从固定更改为绝对。

达到想要的像素数量，图像受到新类的影响，但是如果它总是由绝对位置定义，它将跳转到它将成为的位置。相反，我喜欢它从它所处的位置开始运动。

这是Jquery代码（类＆＃34; .scrolled＆＃34;只是说＆＃34;位置：绝对＆＃34;）

height: 2457px

UPDATE 在下文中，我将添加我的HTML和CSS代码。对不起伙计们，我是初学者，我不知道让他们回答我的问题是非常重要的。

HTML

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

CSS

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

Answer 1

然后在没有顶部，左侧，右侧，底部的图像的CSS上放置一个相对位置，它会没问题。不知道你是不是放了你的HTML和CSS

Answer 2

当您删除滚动的类时，您可以添加另一个名为'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");
    }
  });
});

它工作正常，当你从顶部滚动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;
}

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

2 个答案: