jQuery高度高度计

jQuery Height Altimeter

本文关键字：高度计 高度 jQuery      更新时间：2023-09-26

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

例如，当你在页面顶部时，它显示10,000，当你向下滚动时，它减少，直到当你滚动到页面底部时，它达到0。

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

是否有一个简单的函数来解决这个问题?

我讨厌"给我代码"的问题，但一旦你弄清楚所有涉及的数学，这实际上是相当简单的。关键函数是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/

相关文章：