使用jQuery捕获垂直滚动百分比

我一直在编写一些脚本来检测滚动窗口的百分比，并在窗口滚动指定百分比时触发事件。

2013年6 月3日更新–在下面的滚动示例中添加了“锁定页脚”。

在Firefox 8从未在窗口上滚动到100％的情况下，这非常有趣。 我并不完全相信这是Firefox中的错误，或者是我对如何计算滚动百分比的错误理解。

如您所见，窗口到达底部，但FF8仅检测到99.8％的滚动。

但是使用chrome 12可以达到预期的100％。

//never reaches bottom
$(window).scroll(function(){

    var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();

    console.log('wintop='+wintop);
    console.log('docheight='+docheight);
    console.log('winheight='+winheight);
    console.log(wintop+'=='+(docheight-winheight));
    console.log(wintop==(docheight-winheight));

    if  ($(window).scrollTop() == $(document).height() - $(window).height()) {
       console.log('scroll bottom');
    }

});

使用jQuery检测垂直滚动百分比

这个小脚本将以任意给定百分比触发代码，当前百分比为窗口视图的95％。

//capture scroll any percentage
$(window).scroll(function(){

    var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();
    var  scrolltrigger = 0.95;

    console.log('wintop='+wintop);
    console.log('docheight='+docheight);
    console.log('winheight='+winheight);
    console.log(wintop+'=='+(docheight-winheight));
    console.log(wintop==(docheight-winheight));
    console.log('%scrolled='+(wintop/(docheight-winheight))*100);

    if  ((wintop/(docheight-winheight)) > scrolltrigger) {
       console.log('scroll bottom');
       lastAddedLiveFunc();
    }
});

现在我们可以看到，Firefox 8触发事件。

在滚动示例上锁定页脚

JS代码。

//当页面向上/向下滚动时，隐藏/显示页脚已锁定
$（window）.bind（'scroll'，function（e）
{
var wintop = $（window）.scrollTop（），docheight = $（document）.height（），winheight = $（window）.height（），
showTrigger ='700'，//向下显示700
hideTrigger ='200'; // 200会隐藏

//向下滚动显示
//隐藏向上滚动
如果（wintop> showTrigger）
{
$（'＃footer'）。addClass（'fixed'）。fadeIn（）;
}
否则if（wintop <hideTrigger）{$（'＃footer'）。fadeOut（）。removeClass（'fixed'）; }}）; [/ js] CSS代码。 [js]＃footer.fixed {位置：固定； 底部：0 宽度：100％; } [/ js]

From: https://www.sitepoint.com/jquery-capture-vertical-scroll-percentage/