我最初运行的是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;
}