否則，如果無法通過scrollTop在Javascript中使用

Question

我正在執行有關window scrollTop的代碼，在該代碼中，當您向上滾動200時，會有一個div出現一種行為，如果您跨越500px，則div會以另一種方式出現。 后者沒有執行，只有第一個正在執行。 我開始學習JavaScript，因此，如果這是一個小問題，請原諒:)這是代碼：

  window.onscroll = function() {myFunction()}; function myFunction() { if(document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) { document.getElementById("meBox").style.position = "fixed"; document.getElementById("meBox").style.background = "green"; } else if (document.body.scrollTop > 500 || document.documentElement.scrollTop > 500) { document.getElementById("meBox").style.position = "fixed"; document.getElementById("meBox").style.background = "pink"; } else { document.getElementById("meBox").style.position = ""; document.getElementById("meBox").style.background = ""; } }//end function 

  *{margin: 0; padding: 0;} body {height: 3000px;} .box {float: left; width: 100%; height: 70px; background: yellow; padding: 15px; box-sizing: border-box; margin: 0; position: relative;} .box h2 {margin: 0; padding: 0;} 

 <div class="box" id="meBox"><h2>I am Heading</h2></div> 

請幫忙！

提前致謝

Answer 1

這是因為第一個被首先評估並且總是正確的，如果它大於500，那么它也大於200。 如果將if與500放在首位。

同樣，無需將myFunction包裝在另一個函數中，即可將其分配給onscroll 。

window.onscroll = myFunction;

function myFunction() {
    if (document.body.scrollTop > 500 || document.documentElement.scrollTop > 500) {   
        document.getElementById("meBox").style.position = "fixed";
        document.getElementById("meBox").style.background = "pink";

     } else if(document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
        document.getElementById("meBox").style.position = "fixed";
        document.getElementById("meBox").style.background = "green";
    } else {
        document.getElementById("meBox").style.position = "";
        document.getElementById("meBox").style.background = "";
    }

}//end function

Answer 2

改善條件，即也指定上限

 window.onscroll = function() { myFunction() }; function myFunction() { var top = document.body.scrollTop; var elemTop = document.documentElement.scrollTop; if (top > 200 && top <= 500 || elemTop > 200 && elemTop <= 500) { document.getElementById("meBox").style.position = "fixed"; document.getElementById("meBox").style.background = "green"; } else if (top > 500 || elemTop > 500) { document.getElementById("meBox").style.position = "fixed"; document.getElementById("meBox").style.background = "pink"; } else { document.getElementById("meBox").style.position = ""; document.getElementById("meBox").style.background = ""; } } //end function 

 * { margin: 0; padding: 0; } body { height: 3000px; } .box { float: left; width: 100%; height: 70px; background: yellow; padding: 15px; box-sizing: border-box; margin: 0; position: relative; } .box h2 { margin: 0; padding: 0; } 

 <div class="box" id="meBox"> <h2>I am Heading</h2> </div>