Jquery how to check if a scroll is almost down

Question

There are many sites (e.g. www.9gag.com) that check the percentage of scroll and determine if you are 80% lower. If so, more content is displayed.

Example code that I would like to see:

$(window).scroll(function () { if(scroll.height >= 80%) { // the scroll is about 80% down. } }); 

I would like to know how I can check if the scroll scrolls about 80%, for example, these websites?

Answer 1

You check the page height and compare this value with the current position. If the current position is 80% of the height than you are using some kind of code.

 $(window).scroll(function () { var content_height = $(document).height(); var content_scroll_pos = $(window).scrollTop(); var percentage_value = content_scroll_pos * 100 / content_height; if(percentage_value >= 80) { console.dir("the scroll is about 80% down."); } }); 

Not tested, but should do what you want :)

thanks Alvaro for adding my violin code: http://jsfiddle.net/2wSSS/7/

Answer 2

This is what you need to do:

 //when scrolling... $(window).scroll(function() {  var windowsHeight = $(document).height() - $(window).height(); var currentScroll = $(window).scrollTop(); //if I scroll more than 80% if( ((currentScroll *100) / windowsHeight) > 80){ //do whatever } }); 

Life example: http://jsfiddle.net/2wSSS/6/

Answer 3

 $( document ).ready( function() { $( window ).bind( 'scroll', function( event ) { var win = $( this ), doc = $( document ), winH = win.height(), winT = win.scrollTop(), docH = doc.height(), interval = parseInt( winH * 0.2, 10 ); if( docH - winH - winT < interval ) { console.log( 'the scroll is about 80% down' ); } }); }); 

Answer 4

Try

 $(window).scroll(function () { if (($(window).scrollTop() + $(window).height()) > 0.8 * $(document).height()) { $('body').append("<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div><div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>") } }) 

Fiddle

An example of adding dynamic content when a page scrolls below 80%

Answer 5

Since there was no answer selected, here is what I use to determine how far below in pixels, not percentages:

 if($(window).scrollTop() + $(window).height() > $(document).height() - 300) { });