javascript - 否则如果在 Javascript 中无法使用scrollTop

Question

我正在执行有关窗口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