else if not working in Javascript with scrollTop

Question

I was executing code about window scrollTop where as you scroll up by 200 you have a div with one behaviour and if you cross 500px you would have div behave in another way. The later is not getting executed but just first one is executing. I am starting to learn javascript so please forgive me if this is a small fix :) Here's the code:

       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>

Please help!

Thanks in advance

It's because the first one get evaluated first and is always true, if it's bigger than 500 then it's bigger than 200 too. Put the if with 500 first. — GillesC
– GillesC, Commented Mar 7, 2016 at 12:52
Because 500 is greater than 200. If the first one is true, it will not keep checking the others. — epascarello
– epascarello, Commented Mar 7, 2016 at 12:53

GillesC · Accepted Answer · 2016-03-07 12:56:02Z

1

It's because the first one get evaluated first and is always true, if it's bigger than 500 then it's bigger than 200 too. Put the if with 500 first.

Also no need to wrap the myFunction in another function to assign it to 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

edited Mar 7, 2016 at 12:56

answered Mar 7, 2016 at 12:55

GillesC

10.9k3 gold badges42 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Wouter den Ouden Over a year ago

Just wanted to answer the same :D

Satpal · Accepted Answer · 2016-03-07 12:56:09Z

Improve the conditions i.e. specify the upper-limit also

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>

Collectives™ on Stack Overflow

else if not working in Javascript with scrollTop

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related