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

我有两个云图像，当页面滚动时，这两个图像都需要从页面左侧移到中间。到目前为止，我只能让第一朵云移动。我不明白为什么第二朵云不会移动。我是编程和Javascript新手-任何帮助都将不胜感激。非常感谢。JSIDLE链接和代码如下：

HTML:

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;

});

var lastTopFirstCloud；
var lastTopSecondCloud；
window.addEventListener（'scroll'，函数（事件）{
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

您输入的ID错误，仅此而已

在

var cloudTwo=document.getElementById（'SecondMovingCloud'）

，

SecondMovingCloud

应该是

SecondMovingCloud

Javascript、CSS和HTML区分大小写

---

不确定JSFiddle是否显示JS错误，但当我将所有内容复制到Codepen时，它显示了错误

uncaughttypeerror:cannotreadproperty'className'of null

。这意味着

document.getElementById（）

返回空值，这导致了您的拼写错误。只是分享一些关于如何调试的想法

---

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

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;

});

var lastTopFirstCloud；
var lastTopSecondCloud；
window.addEventListener（'scroll'，函数（事件）{
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

---

此外，您确实应该为此使用数组，而不是编写两次代码

非常感谢cyqsimon！我以为我已经仔细检查过了。也感谢您提供有关阵列的提示。我现在就调查一下。

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;

});

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;

});