Question

我正在尝试创建标题动画，这些动画根据页面滚动量而触发。我正在使用以下代码来计算页面下的百分比，然后为相应的标题设置动画： '''

var perctScrolled = 0;
//--------Scroll Percentage calc------
function amountscrolled(){
    var winheight = $(window).height(); //scrollable area of document
    var docheight = $(document).height(); //height of entire webpage
    var scrollTop = $(window).scrollTop();
    var trackLength = docheight - winheight; //total available scroll length
    perctScrolled = Math.floor(scrollTop/trackLength * 100); //amount scrolled
    console.log(perctScrolled + '% scrolled');
}
//-----title animation----
$(window).scroll(function() {
    amountscrolled();
    var scrollPosition= [125,225,250,350,450]; //percentage of the height where i want titles to display
    for(var i=0; i < scrollPosition.length;){
        var currentTitle = "#title:nth-child("+i+")";
        if (perctScrolled == scrollPosition[i]) {  
            $(currentTitle).css('left', 0);
            i++;
        }else{i++;}
    }
});

''' 当我加载站点时，它将在控制台中返回“ infinity％scroll”，而不是当前的滚动百分比。谁能解释为什么这不起作用/无法修复我的代码？谢谢

编辑：第一次加载页面时，控制台中显示“ infinity％scroll”。然后无法重新加载页面。可能与我的循环有关吗？

Answer 1

经过数小时的拉拔，我的头发终于开始工作了。原来我的html实际上与窗口高度相同，因此docHeight和winHeight具有相同的值。我假设这是由于HTML和body元素的溢出属性所致。我改用以下方法：

function amountScrolled(){
    var winHeight = $(window).height();
    var outerHeight = 0;
    var scrollTop = $(window).scrollTop();
    $('.partition').each(function() {outerHeight += $(this).outerHeight();});
    var trackLength = outerHeight - winHeight; 
    if (trackLength != 0){
        perctScrolled = Math.floor(scrollTop/trackLength * 100);
    } else {perctScrolled = 0;} 
    return perctScrolled;
}

该网页分为多个部分，每个部分的类为.partition，因此我使用这些部分来获取页面的完整长度。然后我用它来代替```docHeight``。我知道这不是执行此操作的最有效方法，但这是我可以上班的唯一方法。这是工作代码：

var scrollPosition = [6,28,32,60,80];//array of animation trigger points
var titlesLoaded = false;//stops function being called when all animations have ran
var perctScrolled = 0;
$(window).scroll(function() {
    var scrollVal = amountScrolled();
    if(!titlesLoaded){
        titleAnimation(scrollVal);
    } returnBtnAnimimation();
});
function amountScrolled(){
    var winHeight = $(window).height();
    var outerHeight = 0;
    var scrollTop = $(window).scrollTop();
    $('.partition').each(function() {outerHeight += $(this).outerHeight();});
    var trackLength = outerHeight - winHeight; 
    if (trackLength != 0){
        perctScrolled = Math.floor(scrollTop/trackLength * 100);
    } else {perctScrolled = 0;} 
    return perctScrolled;
}function titleAnimation(){
        for(var i=0; i < scrollPosition.length;){
            $('.title').each(function(){compareHeight(i)});
            i++;
    }
}function compareHeight(iterationNo){
    var currentSection = "#section" + (iterationNo+2) + " > .title";
    if(scrollPosition[iterationNo] <= perctScrolled) {
      if (iterationNo==4){titlesLoaded=true;}
      else{
        console.log("title"+(iterationNo+1)+" in " +currentSection+ " should be moved");
        $(currentSection).css('left', 0);
      }
    }   
}

需要添加一些验证以阻止其不断调用：

修复页面滚动百分比返回无穷大的问题吗？

1 个答案: