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

Question

我想使用高度為110px和10px的兩個div制作滾動條。 較小的一個在最高的里面。 這給了我將較小的邊距高度從0更改為100px的空間，並且仍然可以適合較高的邊距高度。

如果您想知道，0到100像素就是我在問題標題上的意思，即從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/

Answer 1

計算百分比非常容易。 然后將百分比縮放到滾動條的大小是微不足道的。

        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/