如何在页面滚动时使第二个 div 动画

Question

我有两个云图像，当页面滚动时，我都需要从页面左侧移动到中心。到目前为止，我只能让第一朵云移动。我无法弄清楚为什么第二朵云不会移动。我是编程和 Javascript 的新手 - 任何帮助将不胜感激。谢谢你。JSFiddle 链接和代码如下：https://jsfiddle.net/b1ts5gLc/16/HTML：   <div class="section"></div>   <div id="firstMovingCloud" class="cloudInfo">     <img src="https://i.postimg.cc/2yrPXb1L/cloud.png" class="cloud-image">   </div>   <div id="secondMovingCloud" class="cloudInfo">     <img src="https://i.postimg.cc/2yrPXb1L/cloud.png" class="cloud-image">   </div>   <div class="section"></div> </div>CSS：body {  background-color: #ADD8E6;}.section {  height: 1000px;}.wrapper {  position: relative;}.cloudInfo {  position: relative;  text-align: center;}.cloud-image {  width: 240px;  height: auto;}#firstMovingCloud {  transform: translate(-50%, 0%);/*move the cloud out*/}#firstMovingCloud.moving {  transition: all 2s ease-out; /*bring the cloud in*/  transform: translate(0%, 0%);}#secondMovingCloud {  transform: translate(-50%, 0%);}#secondMovingCloud.movingTwo {  transition: all 2s ease-out;  transform: translate(0%, 0%);}JAVASCRIPT：var lastTopFirstCloud;var lastTopSecondCloud;window.addEventListener('scroll', function(event) {  var cloudOne = document.getElementById('firstMovingCloud');  var cloudTwo = document.getElementById('SecondMovingCloud');  var firstCloudTop = cloudOne.getBoundingClientRect().top;   var secondCloudTop = cloudOne.getBoundingClientRect().top;    if (cloudOne.className.indexOf('moving') === -1 && firstCloudTop < lastTopFirstCloud) {           cloudOne.classList.add('moving');     }    lastTopFirstCloud = firstCloudTop;    if (cloudTwo.className.indexOf('movingTwo') === -1 && secondCloudTop < lastTopSecondCloud) {           cloudOne.classList.add('movingTwo');    }    lastTopSecondCloud = secondCloudTop;});

Answer 1

你打错了一个ID，就是这样。

在var cloudTwo = document.getElementById('SecondMovingCloud');，SecondMovingCloud应该是secondMovingCloud。

Javascript、CSS 和 HTML 区分大小写。

不确定 JSFiddle 是否显示 JS 错误，但是当我将所有内容复制到 Codepen 时，它显示了错误Uncaught TypeError: Cannot read property 'className' of null。这意味着document.getElementById()返回 null，这导致我拼写错误。只是分享一些关于如何调试的想法。

刚刚注意到您还忘记在几个地方更改变量名称。您可能编写过一次并复制了它，但忘记更改变量名。这是更正的版本。

var lastTopFirstCloud;

var lastTopSecondCloud;

window.addEventListener('scroll', function(event) {

  var cloudOne = document.getElementById('firstMovingCloud');

  var cloudTwo = document.getElementById('secondMovingCloud');

  var firstCloudTop = cloudOne.getBoundingClientRect().top; 

  var secondCloudTop = cloudTwo.getBoundingClientRect().top;

    if (cloudOne.className.indexOf('moving') === -1 && firstCloudTop < lastTopFirstCloud) { 

          cloudOne.classList.add('moving');

     }

    lastTopFirstCloud = firstCloudTop;

    if (cloudTwo.className.indexOf('movingTwo') === -1 && secondCloudTop < lastTopSecondCloud) { 

          cloudTwo.classList.add('movingTwo');

    }

    lastTopSecondCloud = secondCloudTop;

});

此外，您确实应该为此使用数组，而不是两次编写代码。https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array