Check out this demonstration on jsfiddle: http://jsfiddle.net/remibreton/RWJhM/2/
Here, I am utilizing the
document.onscroll = function(){ //Scroll event }
method to identify a scroll event on the document.
The calculation involves determining the percentage of page scrolled in relation to its height:
(document.body.scrollTop * 100 / (document.body.clientHeight - document.documentElement.clientHeight))
.
document.body.scrollTop signifies the number of pixels scrolled from the top, document.body.clientHeight represents the entire document's height, and
document.documentElement.clientHeight
indicates the visible portion of the document or viewport.
You can then compare this calculated value to a specified target percentage and execute JavaScript accordingly. For instance, using
if(currentPercentage > targetPercentage)
...
Below is the complete code snippet:
document.onscroll = function(){
var targetPercentage = 80;
var currentPercentage = (document.body.scrollTop * 100 / (document.body.clientHeight - document.documentElement.clientHeight));
console.log(currentPercentage);
if(currentPercentage > targetPercentage){
document.getElementById('pop').style.display = 'block';
// Scrolled more than 80%
} else {
document.getElementById('pop').style.display = 'none';
// Scrolled less than 80%
}
}
If you prefer to use jQuery, here is the same example implemented with jQuery: http://jsfiddle.net/remibreton/8NVS6/1/
$(document).on('scroll', function(){
var targetPercentage = 80;
var currentPercentage = $(document).scrollTop() * 100 / ($(document).height() - $(window).height());
if(currentPercentage > targetPercentage){
$('#pop').css({display:'block'});
//Scrolled more than 80%
} else {
$('#pop').css({display:'none'});
//Scrolled less than 80%
}
});