javascript - jQuery 高度计

Question

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

例如，当您位于页面顶部时，它显示 10 000，当您向下滚动时，它会减少，直到当您滚动到页面底部时，它会显示为 0。

它应该根据滚动工作，所以当你向上滚动时它会增加而向下滚动会减少，最大范围可以说，页面顶部为 10000，页面底部为 0。

是否有一个简单的函数可以解决这个问题？

Answer 1

我讨厌“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/