在特定滾動 position 上添加陰影

Question

我編寫了一個 function 代碼，當有特定的滾動 position 時，它會給元素一個陰影。 所以我想在滾動 position 大於 40 時給第一個元素一個陰影。當你繼續滾動時，當滾動 position 大於 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部分移到> 40之前。 這樣，如果大於 90，它將進入該案例，並跳過其他案例：

   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=""} })