CODEWITHSUNDEEP
javascriptfunctionif-statement
Rohit Sharma
Rohit Sharma

Reputation: 15

else if not working in Javascript with scrollTop

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

Upvotes: 0

Views: 250

Answers (2)

Satpal
Satpal

Reputation: 133403

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>

Upvotes: 0

GillesC
GillesC

Reputation: 10874

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

Upvotes: 1

Related Questions