Question

我的代码：

var vert = $(this).scrollTop();
function scrollBetween(startPoint, endPoint, name){
        var progressNumber;

        progressNumber = (1 / (endPoint - startPoint)) * (vert - startPoint);
        if (progressNumber >= 0 && progressNumber <= 1) {
            name.progress(progressNumber);
        }
        else if(progressNumber < 0) {
            name.progress(0);
        }
        else if(progressNumber > 1) {
            name.progress(1);
        }
    }

被调用的一个例子：

scrollBetween(300, 700, anim1);

因此，正如目前所写，我有两个像素点传递给我的函数。我无法弄清楚的是如何将这些点转换为总视口的百分比。所以我想实现这个目标：

scrollBetween(2%, 15%, anim1);

但我一直在尝试各种方法时遇到错误。我知道我不能像上面那样传递它但是我无法弄清楚如何获得％而不是像素。

我想使用％而不是px，因为我希望页面保持响应。

感谢。

Answer 1

@krisph对此有所帮助，我做了以下操作以获得响应百分比值：

var vert = $(this).scrollTop();
var docHeight = $(document).height();

function scrollBetween(startPoint, endPoint, name){
    var progressNumber;

    startPoint = (docHeight/100) * startPoint;
    endPoint = (docHeight/100) * endPoint;


    progressNumber = (1 / (endPoint - startPoint)) * (vert - startPoint);
    if (progressNumber >= 0 && progressNumber <= 1) {
        name.progress(progressNumber);
    }
    else if(progressNumber < 0) {
        name.progress(0);
    }
    else if(progressNumber > 1) {
        name.progress(1);
    }
}

scrollBetween(2, 15, anim1);

将滚动值作为参数的百分比传递，计算两点之间的距离？

1 个答案: