Javascript 如何进行多个window.onscrolls

当用户向下滚动50像素时，火箭飞船会旋转，背景会做一些事情。当用户向下滚动100px时，我如何使火箭做其他事情

这是我的密码

<script>
      window.onscroll = function() {

        var scrollamount = document.body.scrollTop;
        var otherscrollamount = document.documentElement.scrollTop;
        var rocket = document.getElementById("rocketship");
        var backgroundone = document.getElementById("one");
        var backgroundtwo = document.getElementById("two");

        if (scrollamount > 50 || otherscrollamount > 50) {
          rocket.setAttribute("style", "transform: rotate(90deg); animation: turn1 1s;");
          backgroundone.setAttribute("style", "opacity: 0; animation: fade2 1s;");
        }

        else if (scrollamount < 50 || otherscrollamount < 50) {
          rocket.setAttribute("style", "transform: rotate(0deg); animation: turn2 1s;");
          backgroundone.setAttribute("style", "opacity: 1; animation: fade1 1s;");
        }

        else if (scrollamount < 100 || otherscrollamount < 100) {
          // other stuff
        }

        else if (scrollamount > 100 || otherscrollamount > 100) {
          //other stuff
        }
      }
    </script>

window.onscroll=函数（）{
var scrollamount=document.body.scrollTop；
var otherscrollamount=document.documentElement.scrollTop；
var rocket=document.getElementById（“rocketship”）；
var backgroundone=document.getElementById（“一”）；
var backgroundtwo=document.getElementById（“两”）；
如果（滚动量>50 | |其他滚动量>50）{
setAttribute（“样式”、“变换：旋转（90度）；动画：旋转1 1s；”；
setAttribute（“样式”，“不透明度：0；动画：Fade21s；”）；
}
else if（滚动量<50 | |其他滚动量<50）{
setAttribute（“样式”、“变换：旋转（0度）；动画：旋转2 1s；”；
setAttribute（“样式”，“不透明度：1；动画：Fade11s；”）；
}
else if（scrollamount<100 | | otherscrollamount<100）{
//其他东西
}
else if（scrollamount>100 | | otherscrollamount>100）{
//其他东西
}
}

您只需测试您的条件，查看它们的顺序是否错误：

    if (scrollamount > 50 || otherscrollamount > 50) {
        // This wil execute even if scroll value is greater than 100
        // Last condition will never be evaluated
    }
    else if (scrollamount < 50 || otherscrollamount < 50) {
        // This will execute only if the first condition returned false and scroll value != 50
    }
    else if (scrollamount < 100 || otherscrollamount < 100) {
      // This will execute only if scroll value == 50
    }
    else if (scrollamount > 100 || otherscrollamount > 100) {
      // This won't execute, because previous conditions covered all possible values
    }

if（scrollamount>50 | |其他scrollamount>50）{
//即使滚动值大于100，也将执行此操作
//最后一个条件永远不会被评估
}
else if（滚动量<50 | |其他滚动量<50）{
//仅当第一个条件返回false且滚动值！=50时，才会执行此操作
}
else if（scrollamount<100 | | otherscrollamount<100）{
//仅当滚动值==50时，才会执行此操作
}
else if（scrollamount>100 | | otherscrollamount>100）{
//这不会执行，因为以前的条件涵盖了所有可能的值
}

重新安排您的条件，如下所示：

// If you need greater scroll, add condition above this one
// Evaluate first greater than
if (scrollamount > 100 || otherscrollamount > 100) {

}
else if (scrollamount > 50 || otherscrollamount > 50) {
    // Below condition not needed, scroll value is between 51 and 100
    // if (scrollamount < 100 || otherscrollamount < 100)
}
else {
    // Below condition not needed, unless you want to omit action if scroll == 50
    // if (scrollamount < 50 || otherscrollamount < 50)
}

if (scrollamount > 100 || otherscrollamount > 100) {
  // Scrolled > 100
} else if (scrollamount > 50 || otherscrollamount > 50) {
  // Scrolled 51-100
} else {
  // Scrolled 1-50
}

//如果需要更大的滚动，请在此滚动上方添加条件
//首先计算大于
如果（滚动量>100 | |其他滚动量>100）{
}
else if（scrollamount>50 | | otherscrollamount>50）{
//在不需要的条件下，滚动值介于51和100之间
//如果（滚动量<100 | |其他滚动量<100）
}
否则{
//不需要以下条件，除非您想在scroll==50时忽略操作
//如果（滚动量<50 | |其他滚动量<50）
}

不太清楚您要检查哪些具体情况，但我认为您应该这样做：

// If you need greater scroll, add condition above this one
// Evaluate first greater than
if (scrollamount > 100 || otherscrollamount > 100) {

}
else if (scrollamount > 50 || otherscrollamount > 50) {
    // Below condition not needed, scroll value is between 51 and 100
    // if (scrollamount < 100 || otherscrollamount < 100)
}
else {
    // Below condition not needed, unless you want to omit action if scroll == 50
    // if (scrollamount < 50 || otherscrollamount < 50)
}

if (scrollamount > 100 || otherscrollamount > 100) {
  // Scrolled > 100
} else if (scrollamount > 50 || otherscrollamount > 50) {
  // Scrolled 51-100
} else {
  // Scrolled 1-50
}

---

您可以通过说

scrollmount>=50&&scrollmount<100

来设置值的范围，以最大限度地控制何时应该发生什么。通过这种方式，您可以创建开始和停止值when do something

document.body

元素并不总是更改。而是检查

document.scrollingElement.scrollTop

值，或者像您已经做的那样，检查

document.documentElement.scrollTop

作为回退

将元素选择器放置在

onscroll

功能之外，因为这些元素只需选择一次。这将带来相同的性能

更改元素上的

className

属性值以设置类，而不是设置内联样式。尽管设置内联样式并没有错，但如果需要编辑样式或脚本，将CSS和JavaScript分开肯定会有帮助

var rocket=document.getElementById（“rocketship”）；
var backgroundone=document.getElementById（“一”）；
var backgroundtwo=document.getElementById（“两”）；
window.onscroll=函数（）{
var scrollamount=document.scrollingElement.scrollTop | | document.documentElement.scrollTop；
如果（滚动量<50）{
rocket.className='rocket-stage-1'；
backgroundone.className='background-stage-1'；
}否则如果（scrollamount>=50&&scrollamount<100）{
rocket.className='rocket-stage-2'；
backgroundone.className='background-stage-2'；
}否则如果（scrollamount>=100&&scrollamount<150）{
//其他东西
}
}

.rocket-stage-1{
变换：旋转（0度）；
动画：turn2 1s；
}
.背景-第1阶段{
不透明度：1；
动画：Fade11s；
}
.火箭-2级{
变换：旋转（90度）；
动画：动画：turn1 1s；
}
.背景-第二阶段{
不透明度：0；
动画：fade2 1s；
}