자바 스크립트 코드 비효율

Question

그래서 저는 웹 사이트를 만들고 옆에있는 버튼을 스크롤 할 때 서로 겹치기를 원합니다. 나는이 일을 할 수 있었지만 자바 스크립트 코드는 매우 길었고, 내가 할 수있는 다른 방법은 다른 사람이 그 일을 할 수있는 방법이 있는지, 그리고 여기에 예제를 제공 할 수 있는지, 링크를 제공 할 수 있는지 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 

JSFIDDLE 모든 문이 무언가로 대체해야하지만 난 밖으로 무엇을 파악하지 못할 경우? 미리 감사드립니다.

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"; 
      } 
     } 
    } 
})();