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.
But using chrome 12 is reaches 100% as expected.
//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.
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