javascript - 如何以1到100的比例应用document.height/window.height的比率。

我想使用高度为110px和10px的两个div来制作滚动条。较小的一个在最高的里面。这给了我将较小的边距高度从0更改为100px的空间，并且仍然可以适合较高的边距。

如果您想知道，0到100px是我在问题标题上的意思，是从1到100的小数位数。

我现在想做的是弄清楚如何计算比例，以使我的10px高度位置相对于较高的div与document.height与window.height成比例。

我整夜都在进行实验，但没有任何功能。这是我拥有的一些代码，但是由于我想听到纯正的想法，因此我要抹掉所有与在此处提出的问题有关的代码。

请指教。

var wheight = $(window).height();
var dheight = $(document).height();
document.getElementById("wheight").innerHTML=wheight;
document.getElementById("dheight").innerHTML=dheight;
document.getElementById("sidescrollbtn").style.marginTop = '70px';

http://jsfiddle.net/vinicius5581/2y63xnxa/4/

最佳答案

计算百分比非常容易。
然后将百分比缩放到滚动条的大小是微不足道的。

        var offset = $(window).scrollTop();
        $(window).scrollTop(offset + 20);
        var wheight = $(window).height();
        var dheight = $(document).height();

        //yep, this is all there is to it.
        var percentualOffset = (offset / wheight) * 100;

        //or use dheight. i'm not sure which applies to you
        //var percentualOffset = (offset / dheight) * 100;

        $("#sidescrollbtn").css("top", percentualOffset);

有关有效的实现，请参见http://jsfiddle.net/2y63xnxa/9/