Javascript代碼效率低下

Question

這樣的IM製作一個網站，並且是在兩側的按鈕，我想他們在滾動相互重疊。我設法得到這個工作，但我的JavaScript代碼是很長的，我不知道如何我會去做它沒有任何人有任何辦法做到這一點，你可以提供一個例子，在這裏，並提供一個鏈接到的jsfiddle，如果你想看看它是如何工作JSFIDDLE

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 > 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 > 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 > 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 > 640){ 
     b5.style.position = "fixed" 
     b5.style.top = "20px" 
    } 
    if(curY > 800){ 
     b6.style.position = "fixed" 
     b6.style.top = "20px" 
    } 
    if(curY > 960){ 
     b7.style.position = "fixed" 
     b7.style.top = "20px" 
    } 
    if(curY > 1120){ 
     b8.style.position = "fixed" 
     b8.style.top = "20px" 
    } 



    if(curY < 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 < 320){ 
     b3.style.position = "absolute" 
     b3.style.top = "340px" 
    } 
    if(curY < 480){ 
     b4.style.position = "absolute" 
     b4.style.top = "500px" 
    } 
    if(curY < 640){ 
     b5.style.position = "absolute" 
     b5.style.top = "660px" 
    } 
    if(curY < 800){ 
     b6.style.position = "absolute" 
     b6.style.top = "820px" 
    } 
    if(curY < 960){ 
     b7.style.position = "absolute" 
     b7.style.top = "980px" 
    } 
    if(curY < 1120){ 
     b8.style.position = "absolute" 
     b8.style.top = "1140px" 
    } 
} 
window.addEventListener("scroll",overlap,false); //calls the function repeatedly as soon a the scroll changes 

所有這些if語句的東西所取代，但我不能想出什麼？ 由於事先

Answer 1

怎麼樣把它扔在所有for循環，並使用映射到你想要的索引。像這樣的東西應該可以做到。

function overlap() { 
    var curY = window.pageYOffset, 
     offset = 160; 
    for (var i = 1, i <= 8; i++) { 
     var elem = document.getElementById("b" + i); 
     if (curY > offset * i) { 
      elem.style.position = "fixed"; 
      elem.style.top = "20px"; 
     } else { 
      elem.style.position = "absolute"; 
      elem.style.top = offset * i + 20 + "px"; 
     } 
    } 
} 

或者如果你希望它快一點，不要每次都得到元素。也許這樣？

var overlap = (function() { 
    var elements = [ 
     document.getElementById("b1"), 
     document.getElementById("b2"), 
     document.getElementById("b3"), 
     document.getElementById("b4"), 
     document.getElementById("b5"), 
     document.getElementById("b6"), 
     document.getElementById("b7"), 
     document.getElementById("b8") 
    ]; 
    return function() { 
     var offset = 160; 
     for (var i = 1, i <= elements.length; i++) { 
      var elem = elements[i-1]; 
      if (curY > offset * i) { 
       elem.style.position = "fixed"; 
       elem.style.top = "20px"; 
      } else { 
       elem.style.position = "absolute"; 
       elem.style.top = offset * i + 20 + "px"; 
      } 
     } 
    } 
})();