javascript - 如何在鼠标滚动上移动元素？

Question

这是我的 html 和 css 代码片段:

.clouds {
  background-image: url('http://placehold.it/1200x1200');
  background-repeat: no-repeat;
  display: block;
}
.cloud-1 {
  width: 138px;
  height: 83px;
  position: absolute;
  left: 200px;
  top: 350px;
}
.cloud-2 {
  width: 100px;
  height: 52px;
  position: absolute;
  left: 625px;
  top: 400px;
  background-position: -935px -9px;
}
.cloud-3 {
  width: 110px;
  height: 58px;
  position: absolute;
  left: 450px;
  top: 350px;
  background-position: -1033px -6px;
}

<div id="animations">
  <div class="clouds cloud-1"></div>
  <div class="clouds cloud-2"></div>
  <div class="clouds cloud-3"></div>
  <div class="clouds cloud-4"></div>
  <div class="clouds cloud-5"></div>
  <div class="clouds cloud-6"></div>
  <div class="clouds cloud-7"></div>
  <div class="clouds cloud-8"></div>
  <div class="clouds cloud-9"></div>
  <div class="clouds cloud-10"></div>
  <div class="clouds cloud-11"></div>
  <div class="clouds cloud-12"></div>
  <div class="clouds cloud-13"></div>
</div>

我想要实现的是在用户向下滚动时将云移到网站边缘。我的云是一个图像 Sprite ，每个云都是绝对定位的。抱歉，我是网络开发的新手，还需要学习很多东西。

Answer 1

我认为这最好通过 Javascript 实现。通过使用 JQuery，这应该不会太难。

---

首先检查你滚动了多远:

var scrollPercent = 100 * $('body').scrollTop() / ($('body).height()

这为您提供了向下滚动的百分比。然后，您可以执行以下操作:

$('.cloud-1').css('left', (200 / scrollPercent) + 'px');

这会将图像设置为从左开始 200 px，如果用户在页面下方，则向左 2 px。

滚动时更新这些值:

$('body').on('scroll', function(){ 
     // methods described above here 
}

---

注意

代码未经测试，它是正确方向的提示。根据您的需要进行调整，并查看 jquery文档。