CODEWITHSUNDEEP
jquerycss
buydadip
buydadip

Reputation: 9417

check if user scrolled to a certain percentage of screen

At the moment, I have the following...

if ($(window).scrollTop() + $(window).height() > 1150)

So if the user scrolls past 1150px this condition is called. Is there a way to change my if condition so that if the user scrolls to 20% of the screen, rather than a given pixel number, than the if condition will be called.

The reason I ask is because this if condition does not take into consideration the heights of different screens. When I test this on different screen sizes I get different results

Upvotes: 1

Views: 85

Answers (3)

Roxoradev
Roxoradev

Reputation: 893

if ($(window).scrollTop() > ($(window).height()*20)/100)

Upvotes: 0

malifa
malifa

Reputation: 8165

You're actually already using everything you need to do that. I would suggest using the native window property innerHeight instead of $(window).heightthough.

What you want to do is specify a maximum height depending on your current innerHeight before you do the check:

var maxHeight = window.innerHeight * 0.2;
if( $(window).scrollTop() > maxHeight ) {
   // do what you want to do
}

Upvotes: 2

Marcin Dusza
Marcin Dusza

Reputation: 432

Edit: Note that whole page height is document.height not window.height

if (($(window).scrollTop()/$(document).height()) > 0.2)

Upvotes: 1

Related Questions