Using jQuery to Capture Vertical Scroll Percentage

I’ve been writing a few scripts to detect the percentage of the window scrolled and trigger events when the window is scrolled a specified percentage.

Update 06/03/2013 - Added Lock Footer on scroll example below.

This is quite interesting where Firefox 8 never reaches 100% scrolled on window. I’m not entirely convinced this is a bug in Firefox or it’s my bad understanding of how to calculate the scrolling percentage.

As you can see, the window reaches the bottom but FF8 only detects 99.8% of the scroll.

FF8-never-reaches-bottom

But using chrome 12 is reaches 100% as expected.

chrome-12-reaches-bottom

//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');
    }

});

Detect % of vertical scroll using jQuery

This little script will fire off code at any given percentage, currently set to 95% of the window view.

//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();
    }
});

Now we can see, Firefox 8 fires triggers the event.

FF8-reaches-bottom

Lock Footer on scroll example

JS Code.

//hide/show footer locked when page scrolled up/down
$(window).bind('scroll', function(e)
{
    var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height(),
        showTrigger = '700', //700 down it will show
        hideTrigger = '200'; //200 up it will hide

    //show on scroll down
    //hide on scroll up
    if (wintop > showTrigger)
    {
        $('#footer').addClass('fixed').fadeIn();
    }
    else if (wintop < hideTrigger)
    {
        $('#footer').fadeOut().removeClass('fixed');
    }
});

CSS code.

#footer.fixed {
    position: fixed;
    bottom: 0;
    width: 100%;
}