Question

所以即时制作一个网站和侧面的按钮我想在它们滚动时互相重叠。我设法让这个工作，但我的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

所有那些如果陈述应该被某些东西取代但我无法弄清楚什么？提前谢谢

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

Javascript代码效率低下

1 个答案: