CODEWITHSUNDEEP
javascriptjqueryscroll
user2783842
user2783842

Reputation: 85

jquery how to check if the scroll is almost down

There are a lot of websites (like www.9gag.com) that check your scroll percentage and identify if you are 80% down. If so, it displays more content.

Example of 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 is about 80% down, like those websites?

Upvotes: 6

Views: 4317

Answers (5)

Daniel Schwarz
Daniel Schwarz

Reputation: 284

Since there hasn't been a chosen answer, here's what I use to detect how far from the bottom in pixels, rather than percentage:

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

Upvotes: 0

user796443
user796443

Reputation:

You check what is height of the page, and compare this value to current position. If current position is 80% of the heigh than you run some 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.");
    }
});

Didn't test it, but should do what you want :)

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

Upvotes: 7

DGS
DGS

Reputation: 6025

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's 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's 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

Has an example of dynamic content being added when page is scrolled below 80%

Upvotes: 0

Alvaro
Alvaro

Reputation: 41605

This is what you have 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
   }
});

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

Upvotes: 1

Yuan Zhaohao
Yuan Zhaohao

Reputation: 584

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

    });
});

Upvotes: 1

Related Questions