1

我最初运行的是Skrollr 库,现在我不得不删除它。经过数小时和数小时的代码运行后,我的眼睛被击中了。

我有一个侧导航,它更改滚动时的 URL 哈希(每个部分都有一个标签 ID),我现在想删除 skrollr 包装,但仍保留 URL 哈希侧导航。问题是,当我删除 var 的包装时,s = skrollr.init({ forceHeight: true, beforerender: function(info){我的侧导航不再起作用:/

var layers = document.getElementById('skrollr-body').getElementsByClassName("slide");
    var nav = document.getElementById('options').getElementsByTagName('ul');
    var layer = 0;
    var activeLayer = 0;

    var onLoad = true;
    var lockButton = false;
    var storeOffset = -1;

    var first = true;

    var initialAnimation = false;

    var animateUpSettings = {
        duration: 500,
        done: function() {
            document.body.style.overflow = 'auto';
            lockButton = false;
        }
    };
    var animateDownSettings = {
        duration: 500,
        easing: 'sqrt',
        done: animateUpSettings.done
    };



    var s = skrollr.init({
        forceHeight: true,
        beforerender: function(info){
            if(first && !window.location.hash){
                for(var i = 0; i < nav.length; i++){
                            if(i == 0){
                                nav[i].setAttribute("class", "button active");
                            }else{
                                nav[i].setAttribute("class", "button inactive");
                            }
                        }
            }else if(first && window.location.hash){

                for(var i = 0; i < nav.length; i++){
                            if(nav[i].getAttribute("tag") == window.location.hash.substring(1)){
                                nav[i].setAttribute("class", "button active");
                            }else{
                                nav[i].setAttribute("class", "button inactive");
                            }
                        }

                        for(var i = 0; i < layers.length; i++){
                    if(layers[i].getAttribute("tag") == window.location.hash.substring(1)){
                        goTo = layers[i];
                        activeLayer = i;
                        break;
                    }
                }

                storeOffset = this.relativeToAbsolute(goTo, 'top', 'top');
                var m = document.height - window.innerHeight;

                if(storeOffset > m){
                    storeOffset = m;
                }

                if(this.getScrollTop() < storeOffset){
                    this.animateTo(storeOffset, animateDownSettings);
                }else{
                    this.animateTo(storeOffset, animateUpSettings);
                }

                first = false;
            }else{

                if(!this.isAnimatingTo()){          
                    if(onLoad){
                        onLoad = false;
                        if(window.location.hash && layers[activeLayer].getAttribute("tag") != window.location.hash.substring(1)){
                            initialAnimation = true;
                        }
                    }
                }

                if(!window.location.hash){
                    nav[0].setAttribute("class", "active");
                }else if(!this.isAnimatingTo()){
                        for(var i = 0; i < nav.length; i++){
                            if(nav[i].getAttribute("tag") == window.location.hash.substring(1)){
                                nav[i].setAttribute("class", "button active");
                            }else{
                                nav[i].setAttribute("class", "button inactive");
                            }
                        }
                }
            }
        },
        render: function(info) {

            if(!this.isAnimatingTo()){
                if(!lockButton){
                    layer = -2;
                    for(var i = 0; i < layers.length; i++){
                        if(this.getScrollTop() >= this.relativeToAbsolute(layers[i], 'top', 'top')){
                            layer = i;
                        }
                    }
                    if(layer < 0) layer = 0;

                    window.location='#'+layers[layer].getAttribute("tag");
                }
            }

            if(initialAnimation){
                initialAnimation = false;
                goTo = null;

                for(var i = 0; i < layers.length; i++){
                    if(layers[i].getAttribute("tag") == window.location.hash.substring(1)){
                        goTo = layers[i];
                        activeLayer = i;
                        break;
                    }
                }

                storeOffset = this.relativeToAbsolute(goTo, 'top', 'top');
                var m = document.height - window.innerHeight;

                if(storeOffset > m){
                    storeOffset = m;
                }

                if(this.getScrollTop() < storeOffset){
                    this.animateTo(storeOffset, animateDownSettings);
                }else{
                    this.animateTo(storeOffset, animateUpSettings);
                }
            }

        }
    });

    document.getElementById('nav').onclick = function(){
        s.stopAnimateTo();
        onLoad = true;
        s.refresh(layers);
        lockButton = true;
    }
4

0 回答 0