1

スクロールするとカウンターが動的に変化する高度計/カウンターディスプレイのようなものを作成できるのではないかと思います。

たとえば、ページの上部にいる場合は10000と表示され、下にスクロールすると減少し、ページの下部にスクロールしたときに0に達するまで減少します。

スクロールに応じて機能するはずなので、上にスクロールすると増加し、下にスクロールすると減少します。最大範囲は、たとえばページの上部で10000、下部で0です。

これを解決する単純な関数はありますか？

4

1 に答える 1

3

私は「gimme-codez」のような質問は嫌いですが、関連するすべての数学を理解すれば、これは実際には非常に簡単です。主な機能はで、現在のスクロール位置をピクセル単位で取得します。これは、がトリガーscrollTop()されるたびに取得されます。scroll

$(document).on('scroll',function(e) {
    var maxcount = 10000,
        scrollpos = $(document).scrollTop(),
        maxpos = $(document).height() - $(window).height(), // might be zero!
        counter = Math.round((maxpos-scrollpos)*(maxcount/maxpos)) || 0;
// (maxpos-scrollpos) counts backwards, while 
// (maxcount/maxpos) scales the result to a number
// between 0 and maxcount
    $('#counter').text(counter);
});

$(document).trigger('scroll'); // run at once

http://jsfiddle.net/mblase75/8MfzX/

ページがスクロールするには短すぎる場合、カウンターはゼロのままになります。この場合にカウンターが必要なmaxcount場合は、次のように言ってください。

    maxpos = $(document).height()-$(window).height() || maxcount,

http://jsfiddle.net/mblase75/8MfzX/9/

于 2013-03-22T21:01:45.677 に答える