1

我想知道是否可以创建一种高度计/计数器显示，当您滚动时动态更改计数器。

例如，当您位于页面顶部时，它会显示 10 000，并且随着您向下滚动它会减小，直到您滚动到页面底部时它会变为 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 回答