像滚动一样在滚动上移动图像

Question

你知道如何使用绝对位置制作视差（CSS解决方案或JavaScript解决方案很好）吗？ 我想要＆＃34;图像＆＃34;当我向下滚动并且不被摧毁时移动。

＆＃13;

＆＃13;

.container{
  position : relative;
  min-width : 100vw;
}
.content{
  width : 90%;
  margin : 50px 5%;
  background-color : #888;
}
.content>p{
  margin-bottom : 20px;
  padding : 5px 15px;
  position : relative;
  z-index : 3;
}
#container-of-img-position-absolute>span{
  background-color : #F00;
  padding : 15px 35px;
  z-index : 2;
}
#img-1{
  position : absolute;
  left : 0;
  top : 70px;
}
#img-2{
  position : absolute;
  right : 0;
  top : 150px;
}
#img-3{
  position : absolute;
  left : 20%;
  top : 20%;
}
#img-4{
  position : absolute;
  right : 20%;
  top : 35%;
}

＆＃13;

<div class="container">

  <div id="container-of-img-position-absolute">
    <span id="img-1">Img 1</span>
    <span id="img-2">Img 2</span>
    <span id="img-3">Img 3</span>
    <span id="img-4">Img 4</span>
  </div>

  <div class="content">
    <p>Nice content !</p>
    <p>Nice content !</p>
    <p>Nice content !</p>
    <p>Nice content !</p>
    <p>Nice content !</p>
    <p>Nice content !</p>
    <p>Nice content !</p>
    <p>Nice content !</p>
    <p>Nice content !</p>
    <p>Nice content !</p>
    <p>Nice content !</p>
    <p>Nice content !</p>
    <p>Nice content !</p>
    <p>Nice content !</p>
    <p>Nice content !</p>
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

我的代码看起来像这样，但我添加了文字而不是图片。

提前致谢！

更新：这就是为什么我的宽度和高度为0 px的原因。 但我不希望图像在第一个容器内，也许我可以用JQuery做到这一点 事实是我想对图像做出一种视差。 感谢您帮助我完成：）

＆＃13;

＆＃13;

.container{
  position : relative;
  min-width : 100vw;
}
.content{
  width : 90%;
  margin : 50px 5%;
  background-color : #888;
}
.content>p{
  margin-bottom : 20px;
  padding : 5px 15px;
  position : relative;
  z-index : 3;
}
#container-of-img-position-absolute>img{
  background-color : #F00;
  position : fixed;
  z-index : 2;
}
#img-1{
  position : absolute;
  left : 0;
  top : 70px;
}
#img-2{
  position : absolute;
  right : 0;
  top : 150px;
}
#img-3{
  position : absolute;
  left : 20%;
  top : 20%;
}
#img-4{
  position : absolute;
  right : 20%;
  top : 35%;
}

＆＃13;

<div>

<div class="container">
 <div class="content">
    <p>Don't want to be in this area</p>
    <p>Don't want to be in this area</p>
    <p>Don't want to be in this area</p>
    <p>Don't want to be in this area</p>
    <p>Don't want to be in this area</p>
    <p>Don't want to be in this area</p>
    <p>Don't want to be in this area</p>
    <p>Don't want to be in this area</p>
    <p>Don't want to be in this area</p>
    <p>Don't want to be in this area</p>
    <p>Don't want to be in this area</p>
  </div>
</div>


<div class="container">

  <div id="container-of-img-position-absolute">
    <img src="https://d1nhio0ox7pgb.cloudfront.net/_img/v_collection_png/128x128/shadow/dog.png" id="img-1">
    <img src="https://d1nhio0ox7pgb.cloudfront.net/_img/v_collection_png/128x128/shadow/dog.png" id="img-2">
    <img src="https://d1nhio0ox7pgb.cloudfront.net/_img/v_collection_png/128x128/shadow/dog.png" id="img-3">
    <img src="https://d1nhio0ox7pgb.cloudfront.net/_img/v_collection_png/128x128/shadow/dog.png" id="img-4">
  </div>

  <div class="content">
    <p>Nice content !</p>
    <p>Nice content !</p>
    <p>Nice content !</p>
    <p>Nice content !</p>
    <p>Nice content !</p>
    <p>Nice content !</p>
    <p>Nice content !</p>
    <p>Nice content !</p>
    <p>Nice content !</p>
    <p>Nice content !</p>
    <p>Nice content !</p>
    <p>Nice content !</p>
    <p>Nice content !</p>
    <p>Nice content !</p>
    <p>Nice content !</p>
  </div>

</div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

＆＃13;

＆＃13;

.container{
  position : relative;
  min-width : 100vw;
}
.content{
  width : 90%;
  margin : 50px 5%;
  background-color : #888;
}
.content>p{
  margin-bottom : 20px;
  padding : 5px 15px;
  position : relative;
  z-index : 3;
}
#container-of-img-position-absolute{
 position: fixed;
 z-index:999;
 }
#container-of-img-position-absolute>span{
  background-color : #F00;
}

＆＃13;

<div class="container">

  <div id="container-of-img-position-absolute">
    <span id="img-1">Img 1</span>
    <span id="img-2">Img 2</span>
    <span id="img-3">Img 3</span>
    <span id="img-4">Img 4</span>
  </div>

  <div class="content">
    <p>Nice content !</p>
    <p>Nice content !</p>
    <p>Nice content !</p>
    <p>Nice content !</p>
    <p>Nice content !</p>
    <p>Nice content !</p>
    <p>Nice content !</p>
    <p>Nice content !</p>
    <p>Nice content !</p>
    <p>Nice content !</p>
    <p>Nice content !</p>
    <p>Nice content !</p>
    <p>Nice content !</p>
    <p>Nice content !</p>
    <p>Nice content !</p>
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

以下是粘性div的工作示例。您需要使用position:fixed而不是绝对。

更新

或者你可以使用简单的JS插件来实现同样的目的。

https://lirancohen.github.io/stickUp/#installation

这是一个链接和示例。

<script src="js/stickUp.min.js"></script>
<script type="text/javascript"> 
 //initiating jQuery 
 jQuery(function($) { 
 $(document).ready( function() { 
 //enabling stickUp on the '.navbar-wrapper' class 
 $('.navbar-wrapper').stickUp(); 
 }); 
 }); 
</script>