title: Javascript code inefficiency
body: <p>So im making a website and the buttons that are on the side i want to overlap on each other as they scroll. i managed to get this to work but my javascript code is very long and i cant figure out how else i would go about doing it does anyone else have any way of doing it and can you provide an example here it is and ill provide a link to a jsfiddle if you want to see how it works <a href="http://jsfiddle.net/CaALc/1/" rel="nofollow">JSFIDDLE</a></p>
  
  <pre><code>    function overlap(){
      var b1 = document.getElementById("b1");  //gets all the button elements by id
      var b2 = document.getElementById("b2");
      var b3 = document.getElementById("b3");
      var b4 = document.getElementById("b4");
      var b5 = document.getElementById("b5");
      var b6 = document.getElementById("b6");
      var b7 = document.getElementById("b7");
      var b8 = document.getElementById("b8");
      var curY = window.pageYOffset            // gets the current scroll offset in pixels and stores it in curY
  
      if(curY &gt; 160){                          //if scroll is more than 160 b2 becomes fixed at 20px off the top
          b2.style.position = "fixed"
          b2.style.top = "20px"
      }
      if(curY &gt; 320){                          //if scroll is more than 320 b3 becomes fixed at 20px off the top
          b3.style.position = "fixed"
          b3.style.top = "20px"
      }
      if(curY &gt; 480){                          //if scroll is more than 480 b3 becomes fixed at 20px off the top
          b4.style.position = "fixed"          //and so on until 1120 off the top to stack all the buttons on top of each other
          b4.style.top = "20px"
      }
      if(curY &gt; 640){
          b5.style.position = "fixed"
          b5.style.top = "20px"
      }
      if(curY &gt; 800){
          b6.style.position = "fixed"
          b6.style.top = "20px"
      }
      if(curY &gt; 960){
          b7.style.position = "fixed"
          b7.style.top = "20px"
      }
      if(curY &gt; 1120){
          b8.style.position = "fixed"
          b8.style.top = "20px"
      }
  
  
  
      if(curY &lt; 160){                      //if scroll becomes less than 160 b2 becomes absolute at its original px of the top
          b2.style.position = "absolute"   //and so on until the original position of b8 is reset
          b2.style.top = "180px"
      }
      if(curY &lt; 320){
          b3.style.position = "absolute"
          b3.style.top = "340px"
      }
      if(curY &lt; 480){
          b4.style.position = "absolute"
          b4.style.top = "500px"
      }
      if(curY &lt; 640){
          b5.style.position = "absolute"
          b5.style.top = "660px"
      }
      if(curY &lt; 800){
          b6.style.position = "absolute"
          b6.style.top = "820px"
      }
      if(curY &lt; 960){
          b7.style.position = "absolute"
          b7.style.top = "980px"
      }
      if(curY &lt; 1120){
          b8.style.position = "absolute"
          b8.style.top = "1140px"
      }
  }
  window.addEventListener("scroll",overlap,false); //calls the function repeatedly as soon a the scroll changes
  </code></pre>
  
  <p>all those if statements should be replaced by something but i cant figure out what ?
  thanks in advance</p>