在特定滚动位置添加阴影

Question

我编写了一个函数，当存在特定的滚动位置时，该函数会为元素提供阴影。所以我想在滚动位置大于 40 时给第一个元素一个阴影。当你继续滚动时，当滚动位置大于 90 时，第二个元素将得到一个阴影。但是，这适用于第一个元素但是不是第二个：即使滚动偏移量大于 90，第一个元素仍然有阴影。window.addEventListener("scroll", function(event) {       var scroll = this.scrollY;       if (scroll > 40)            {document.getElementById("Gegevens").style.boxShadow="0px 0px 45px -4px rgba(0,0,0,0.35)";            document.getElementById("Uren").style.boxShadow=""}       else if (scroll > 90)            {document.getElementById("Gegevens").style.boxShadow="";            document.getElementById("Uren").style.boxShadow="0px 0px 45px -4px rgba(0,0,0,0.35)"}       else             {document.getElementById("Gegevens").style.boxShadow="";             document.getElementById("Uren").style.boxShadow=""}    }) 

Answer 1

如果滚动偏移量大于 90，程序仍将进入第一种情况，因为（显然）大于 90 的数字也必须大于 40。

这将导致该else if部分被跳过，第一个元素将始终被关注。

要解决此问题，您可以：

移动.之前的> 90部分。这样，如果它大于 90，它将进入那种情况，并跳过其他情况：> 40

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

     var scroll = this.scrollY;

     if (scroll > 90)

          {document.getElementById("Gegevens").style.boxShadow="";

          document.getElementById("Uren").style.boxShadow="0px 0px 45px -4px rgba(0,0,0,0.35)"}

     else if (scroll > 40)

          {document.getElementById("Gegevens").style.boxShadow="0px 0px 45px -4px rgba(0,0,0,0.35)";

          document.getElementById("Uren").style.boxShadow=""}

     else 

          {document.getElementById("Gegevens").style.boxShadow="";

           document.getElementById("Uren").style.boxShadow=""}

}) 

添加另一个条件来检查它是否足够大以容纳第二个元素：

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

     var scroll = this.scrollY;

     if (scroll > 40 && scroll <= 90)

          {document.getElementById("Gegevens").style.boxShadow="0px 0px 45px -4px rgba(0,0,0,0.35)";

          document.getElementById("Uren").style.boxShadow=""}

     else if (scroll > 90)

          {document.getElementById("Gegevens").style.boxShadow="";

          document.getElementById("Uren").style.boxShadow="0px 0px 45px -4px rgba(0,0,0,0.35)"}

     else 

          {document.getElementById("Gegevens").style.boxShadow="";

           document.getElementById("Uren").style.boxShadow=""}

})